• 0

Loading jQuery inside JS file.

Asked by Mr.XXIV,

 Share

Question

Grand Master

Mr.XXIV

Posted
Posted

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 src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>')

Is there any way to resolve this?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Enthusiast

Tom Bonez

Posted
Posted

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..

Link to comment
Share on other sites
  • 0
Grand Master

Mr.XXIV

Posted
  • Author
Posted

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"&gt;&lt;/script&gt;

Link to comment
Share on other sites
  • 0
Community Regular

Gocom

Posted
Posted

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.

Link to comment
Share on other sites
  • 0
Grand Master

Mr.XXIV

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
  • 0
Community Regular

Gocom

Posted
Posted

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.

Link to comment
Share on other sites
  • 0
Grand Master

Mr.XXIV

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing