Jump to content



Photo

Loading jQuery inside JS file.

Started by Mr.XXIV , Aug 26 2012 19:02
jquery

  • Please log in to reply
8 replies to this topic

#1 Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
    • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 26 August 2012 - 19:02

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

Is there any way to resolve this?

Ad Bot (disabled when logged in)


#2 Tom Bonez

Tom Bonez

    Neowinian

    • Joined: 02-June 09

Posted 26 August 2012 - 19:54

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>

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

#3 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
    • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 26 August 2012 - 20:08

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.

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

#4 Tom Bonez

Tom Bonez

    Neowinian

    • Joined: 02-June 09

Posted 26 August 2012 - 20:23

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?

#5 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
    • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 26 August 2012 - 21:11

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

#6 Gocom

Gocom

    Neowinian

    • Joined: 14-February 10

Posted 26 August 2012 - 21:53

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.

#7 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
    • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 26 August 2012 - 22:53

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.

#8 Gocom

Gocom

    Neowinian

    • Joined: 14-February 10

Posted 27 August 2012 - 01:56

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.

#9 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
    • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 27 August 2012 - 03:14

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.
Back to Web Design / Programming · Next Unread Topic →
  1. Neowin Forums
  2. → Technical Help & Support
  3. → Web Design / Programming
  4. Privacy Policy
  5. Community Rules ·