Loading jQuery inside JS file.

2,972 · August 26, 2012

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?

August 26, 2012

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

2,972 · August 26, 2012

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>

August 26, 2012

Without looking at your source code I'd be lead to believe your loading your scripts or what not before jQuery has loaded.

Are you able to share your code?

2,972 · August 26, 2012

i just gave you the code. The file is a bootstrap of my toolbar.

August 26, 2012

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.

2,972 · August 26, 2012

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.

August 27, 2012

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.

2,972 · August 27, 2012

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.

Sign In

Loading jQuery inside JS file.

Question

Mr.XXIV

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Tom Bonez

Link to comment

Share on other sites

Mr.XXIV

Link to comment

Share on other sites

Tom Bonez

Link to comment

Share on other sites

Mr.XXIV

Link to comment

Share on other sites

Gocom

Link to comment

Share on other sites

Mr.XXIV

Link to comment

Share on other sites

Gocom

Link to comment

Share on other sites

Mr.XXIV

Link to comment

Share on other sites

Recently Browsing 0 members

Similar Content

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker