• 0

Loading jQuery inside JS file.


Question

So, I know jQuery sucessfully loads, but I get these errors on Chrome's console.

Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: jQuery is not defined

document.write('<script="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;')

Is there any way to resolve this?

Link to comment
https://www.neowin.net/forum/topic/1101239-loading-jquery-inside-js-file/
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Not sure on your exact setup without looking at the source code but I'd always recommend loading jQuery as such:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
[/CODE]

Loading directly from Google (usually cached on peoples machines) with a local fallback..

  • 0

Look at http://illingspree.com, http://mrxxiv.com, and http://wearerap.com

Notice that the bar is unlocked on every site once jQuery has been loaded. But that's not the jQuery that's been loaded on the bar because the one being loaded on the bar might be bad practice, I'm not sure.

Load the bar with this, this is basically the bootstrap and jQuery isn't defined for which is why I'm here.

&lt;script type="text/javascript" src="https://dyno.illingspree.com/toolbar/v1.1/tbLoad.js"></script>

  • 0

You are loading script asynchronously, but have no dependency system implemented. It's not guaranteed that the dependencies are loaded in the correct order, and you are even trying to use jQuery dependent code from the same file that has document.write in it, which inserts the script tags to the document itself -- it doesn't itself load anything synchronously. This is what is causing your errors. Plus, you should not use document.write -- it's deprecated and doesn't even work with whole async model. It itself causes errors.

If you want to do asynchronous or on-demand loading please use a well refined existing script loader (AMD) library. There are ton of gotchas. Otherwise, just put the scripts at the end of the HTML page, before closing </body tag or to the <head> if scripts need to be loaded before the document body. You are just going to break **** if you do what you are doing right now. And as Tom's suggested fallbacks go, don't bother. They require that the connection times out before they even kick in. No one is going sit there in front of blank page for minutes.

If you are looking for a script loader, I would suggest either script.js or require.js. Both are great and do what is necessary to work consistently across browsers, while loading/initializing any dependencies in the correct order. There is also a LABjs that is very stable, but it's abandoned.

Lastly, do not load styles asynchronously. That's never recommended. Put stylesheets to the head unless you want some serious flashing, white pages and content shifting. Plus, styles have dependencies too.

  • 0
  On 26/08/2012 at 21:53, Gocom said:

You are loading script asynchronously, but have no dependency system implemented. It's not guaranteed that the dependencies are loaded in the correct order, and you are even trying to use jQuery dependent code from the same file that has document.write in it, which inserts the script tags to the document itself -- it doesn't itself load anything synchronously. This is what is causing your errors. Plus, you should not use document.write -- it's deprecated and doesn't even work with whole async model. It itself causes errors.

If you want to do asynchronous or on-demand loading please use a well refined existing script loader (AMD) library. There are ton of gotchas. Otherwise, just put the scripts at the end of the HTML page, before closing </body tag or to the <head> if scripts need to be loaded before the document body. You are just going to break **** if you do what you are doing right now. And as Tom's suggested fallbacks go, don't bother. They require that the connection times out before they even kick in. No one is going sit there in front of blank page for minutes.

If you are looking for a script loader, I would suggest either script.js or require.js. Both are great and do what is necessary to work consistently across browsers, while loading/initializing any dependencies in the correct order. There is also a LABjs that is very stable, but it's abandoned.

Lastly, do not load styles asynchronously. That's never recommended. Put stylesheets to the head unless you want some serious flashing, white pages and content shifting. Plus, styles have dependencies too.

As far as loading scripts and styling sheets. How would I handle loading them when setting this to every website that will have the bar? I'm basically trying to boot it all from one external file. I mean, would appending them to <head> make sense to what you're really trying to say or are you saying load them all separate? Complex has their bar and I've basically been inspired that. I'm new to JavaScript btw.

  • 0
  On 26/08/2012 at 22:53, MrXXIV said:

I mean, would appending them to make sense to what you're really trying to say or are you saying load them all separate?

You can load JavaScript from a single bootloader, yes. It honestly may not be very good idea especially if you put in large libraries, which in the long run can cause conflicts and overheat.

But. You can not load JavaScript synchronously by injecting script tags to the document. Not by appending, not by using document write - not going to work. These injected script tags will in certain browsers load asynchronously, and as such, won't maintain order and dependencies break, as you noticed by the error you were getting.

You have few options:

  • Put all JavaScript source in a single JavaScript file. This is ideally what most of bad advertisement loaders and likes do. This is not because it's the best option, but because they use such bad methods to added their advertisements to the page due to compatibility.
  • If you want to load multiple files while maintaining dependencies and initialization order you will need to use XMLHTTPRequest API.

In other words, either:

  • Embed a script loader to the bootloader file and use that script loader to load rest of JavaScript files. I recommend using a well established loader rather than trying to write your own, e.g. require.js or script.js I mentioned previously.
  • Join all the files together. Put everything and anything to the same bootloader file. jQuery, those scripts, everything.

  • 0
  On 27/08/2012 at 01:56, Gocom said:
Join all the files together. Put everything and anything to the same bootloader file. jQuery, those scripts, everything.

Thanks, broski. I'll consider rebuilding based on what you've said, I know loading the bar at the beginning of body was a problem. I actually have the bar loading when the body finishes loading, well, if that actually works. But anyways, I'll give it a try, I'm not well known to JavaScript just yet, so I have a lot of basics to learn from TutsPlus.

This topic is now closed to further replies.
  • Posts

    • Weekend PC Game Deals: Automation fests, Civilization for free, charity specials, and more by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Epic Games Store unlocked a big strategy game giveaway earlier this week: Civilization VI: Platinum Edition. Coming in from Firaxis Games, the turn-based 4X experience has you starting world-conquering campaigns to explore, expand, exploit, and exterminate everything in your empire's reach. PvP and co-op multiplayer are also options if the various forms of AI prove to be too easy or even too troublesome. The Sid Meier’s Civilization VI: Platinum Edition giveaway is live until July 24, and it comes with two massive expansions as well as six DLC packs with extra scenarios, leaders, and more. Next week, tower defense title Legion TD 2 will become the latest freebie on the Epic Games Store. The Humble Store brought a new bundle for action game fans this weekend, and it's all about the Devil May Cry franchise. The Devil Trigger Collection begins with DmC: Devil May Cry and Devil May Cry HD Collection for $10. If you want to complete the bundle, it will set you back $20, which gets you Devil May Cry 4 Special Edition as well as the most recent entry, Devil May Cry 5, as well as its Vergil DLC. This bundle has two weeks left on its counter before it goes away. Big Deals Most publishers are returning to their usual weekend specials after the massive summer sales, so there are plenty of discounts to go around. There's even a special Make a Wish charity sale running on Steam with some discounted viral hits. With all those and more, here's our hand-picked big deals list for the weekend: Satisfactory – $27.99 on Steam Captain of Industry – $24.49 on Steam No Man's Sky – $23.99 on Steam Persona 5 Royal – $23.99 on Steam No More Room in Hell 2 – $22.49 on Steam FOUNDRY – $20.99 on Steam Banishers: Ghosts of New Eden – $19.99 on Steam SULFUR – $19.99 on Steam Assassin's Creed Mirage – $19.99 on Steam Alan Wake 2 – $19.99 on Epic Store Grand Theft Auto V Enhanced – $19.79 on Steam Norland – $19.49 on Steam Stray – $17.99 on Steam V Rising – $17.49 on Steam Dyson Sphere Program – $15.99 on Steam The Outlast Trials – $15.99 on Steam Warhammer 40,000: Darktide – $15.99 on Steam The Outlast Trials – $15.99 on Steam Red Dead Redemption 2 – $14.99 on Steam Turing Complete – $13.99 on Steam Eden Crafters – $13.99 on Steam Core Keeper – $13.99 on Steam Thank Goodness You're Here! – $12.99 on Steam Opus Magnum – $9.99 on Steam Autonauts – $9.99 on Steam EXAPUNKS – $9.99 on Steam DRAGON BALL XENOVERSE 2 – $9.99 on Steam Superliminal – $9.99 on Steam Heaven's Vault – $9.99 on Steam RAILGRADE – $9.89 on Steam Goat Simulator 3 – $9.89 on Steam Tchia – $9.89 on Steam ACE COMBAT 7: SKIES UNKNOWN – $9.59 on Steam PAYDAY 3 – $8.99 on Steam Assassin's Creed Origins – $8.99 on Steam Viewfinder – $8.74 on Steam Escape Academy – $7.99 on Steam Pit People – $7.99 on Steam Skull and Bones – $7.99 on Steam Immortals Fenyx Rising – $7.99 on Steam Imperator: Rome – $7.59 on Steam SHENZHEN I/O – $7.49 on Steam Tom Clancy’s The Division 2 – $7.49 on Steam Bassmaster Fishing – $7.49 on Steam Let's Build a Zoo – $6.99 on Steam The Forgotten City – $6.24 on Steam Control Ultimate Edition – $5.99 on Steam Bramble: The Mountain King – $5.99 on Steam Assassin’s Creed Rogue – $5.99 on Steam RoboCop: Rogue City – $4.99 on Steam Kingdom Two Crowns – $4.99 on Steam Scott Pilgrim vs. The World: The Game – $4.94 on Steam Castle Crashers – $4.49 on Steam BattleBlock Theater – $4.49 on Steam TOEM: A Photo Adventure – $3.99 on Steam Supraland – $3.99 on Steam Vampire Survivors – $3.99 on Steam Darkwood – $3.74 on Steam Valiant Hearts: The Great War – $3.74 on Steam TIS-100 – $3.49 on Steam PAYDAY 2 – $3.29 on Steam Cake Bash – $2.99 on Steam Ragnarock – $1.99 on Steam Alan Wake – $1.49 on Steam Civilization VI Platinum Edition – $0 on Epic Store DRM-free Specials Lastly, here are some highlights from the DRM-free discounts available on the GOG store this weekend: Age of Wonders 4 - $29.99 on GOG Pathfinder: Wrath of the Righteous - Game of the Year Edition - $19.99 on GOG Tomb Raider IV-VI Remastered - $19.49 on GOG The Thaumaturge - $19.24 on GOG Chained Echoes - $13.74 on GOG Tyranny - Gold Edition - $12.49 on GOG Tomb Raider I-III Remastered Starring Lara Croft - $11.99 on GOG Baldur's Gate: Enhanced Edition - $9.99 on GOG Baldur's Gate II: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Enhanced Edition - $9.99 on GOG Old World - $9.99 on GOG Icewind Dale: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Doom of Icewind Dale - $7.99 on GOG Kingdom Come: Deliverance - $5.99 on GOG Might and Magic 6-pack Limited Edition - $4.99 on GOG Heroes of Might and Magic 3: Complete - $4.99 on GOG Blood Omen: Legacy of Kain - $3.49 on GOG Might and Magic 8: Day of the Destroyer™ - $2.99 on GOG Worms Armageddon - $2.99 on GOG ATOM RPG: Post-apocalyptic indie game - $2.99 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
    • Wild that this was even allowed from the jump
    • Microsoft stops using China-based engineers to support US defense clients by Hamid Ganji Microsoft announced on Friday that its China-based engineers can no longer provide technical support to the US military and other defence clients using the company's cloud services. Frank Shaw, Microsoft's Chief Communications Officer, wrote on X, "In response to concerns raised earlier this week about US-supervised foreign engineers, Microsoft has made changes to our support for US Government customers to assure that no China-based engineering teams are providing technical assistance for DoD Government cloud and related services." The issue came into the spotlight after a report by ProPublica detailed how Microsoft's Azure engineers in China are providing technical support to the US defense clients. Microsoft had apparently told ProPublica that its engineers and contractors complied with US government laws. These China-based engineers are reportedly supervised through so-called "digital escorts" in the US, who are allegedly less technically qualified than the engineers and can not determine whether the Chinese engineers under their supervision pose a cyber threat to the United States. On Friday, Senator Tom Cotton sent a letter to Defense Secretary Pete Hegseth, demanding explanations about how these "digital escorts" are trained to detect threats, as well as the list of contractors that use Chinese personnel. "The US government recognizes that China's cyber capabilities pose one of the most aggressive and dangerous threats to the United States, as evidenced by infiltration of our critical infrastructure, telecommunications networks, and supply chains," Cotton wrote. In a video posted on X, Hegseth said this is "obviously unacceptable" and that he's issuing a two-week review of Pentagon cloud deals to ensure that "China will no longer have any involvement whatsoever in our cloud services, effective immediately." The US Defense Secretary also said the current controversy is due to "A legacy system created over a decade ago, during the Obama administration." Microsoft, Amazon, Google, and Oracle jointly received a $9 billion Department of Defense cloud services contract in 2022.
    • This morning down to 17% after 8 days.
    • Cutcon 4.0 by Razvan Serea Cutcon is a free, open-source desktop app for cutting, converting, and previewing video, audio, and image files. Built with Kotlin and powered by FFmpeg, it's fast, lightweight, and easy to use. Ideal for content creators, editors, and developers, Cutcon supports a wide range of media formats and offers a clean user interface. Originally forked from the Clipper project, it enhances performance and usability while remaining fully cross-platform. Whether trimming videos or converting audio formats, Cutcon streamlines your workflow without compromising quality. Perfect for those seeking a simple yet powerful media processing tool. Cutcon offers three core functions that make working with media files fast and simple: Cut – Remove unwanted sections from video, audio, or image files without re-encoding. Keep only what you need. Convert – Change files from one format to another using FFmpeg. Supports a wide range of formats for video, audio, and images. Preview – Play media directly inside the app before cutting or converting. Quickly verify content without opening another program. Cutcon 4 release notes: This release rebases Cutcon on Clipper v1.20.0 bringing support for Linux and macOS and updating the app branding. Also, there is now only one variant of the app with support for most common media types. New features Add support for Linux operating system (common distros) Add support for macOS operating system (experimental) Add support for playing FLAC audio format Add support for playing Opus audio format Improvements Update app brand (logo, colors) Improve media player to hugely boost its performance Use a fake file for the app initial input source Make theme colors change with animation Update the app error window layout Misc Change log file directory to user home Several improvements in app code Download: Cutcon 4.0 | 89.8 MB (Open Source) View: Cutcon Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Dedicated
      Homeless Vagrant earned a badge
      Dedicated
    • One Month Later
      Coolray5432 earned a badge
      One Month Later
    • Week One Done
      Coolray5432 earned a badge
      Week One Done
    • One Year In
      Jonabomuk earned a badge
      One Year In
    • One Month Later
      Jonabomuk earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      196
    4. 4
      Xenon
      161
    5. 5
      +FloatingFatMan
      138
  • Tell a friend

    Love Neowin? Tell a friend!