why isn't jQuery loading?

Question

When using an importjs() type of function (see below for an example), jQuery doesn't seem to be loading before the code following it.

Here's a sample html file:

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

With the above code, the alert should successfully fire.

Next, comment out the first script block, i.e. the one explicitly loading jQuery, and uncomment the importjs(f1) line in the second script block. This time, the alert does not fire, at least in firefox and safari.

Now, put in an extra alert before the line "var $j=jQuery". For me, it works in both browsers, regardless of how long or short I wait. A setTimeout would probably also do the trick, but it's also not an ideal way to program something like this.

If javascript is single-threaded, why does the importjs fail? Is it because the new element created by importjs doesn't get 'executed' until the first block finishes, or should the new element be executed as soon as it is created?

alex · Accepted Answer · 2011-05-30 23:29:30Z

7

There are several problems here:

you have jQuery duplicated, one in the html, one in the js

dynamically added javascript won't be available immediately if you load scripts this way the dependant code should be in a callback function

function importjs(jsFile, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
      // execute callback
      if (callback) callback();
      // prevent memory leak in IE
      script.onload = null;
      head.removeChild(script);
    };
    head.appendChild(script);
}

then you should use it as:

importjs("jquery.js", function(){
    // all jQuery dependant code
    // goes here...
});

UPDATE

There is a more robust solution for including javascript files which allows you to:

include multiple files that are related
ensure they are executed in order
load them in a non-blocking way (parallel with other resources)

I'm still working on this script, but pretty much works right now. Be sure to check it out.

It combines the advantages of different techniques to give a huge benefit on page load time. Here is a related article: Loading Scripts Without Blocking

The syntax is:

include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order

edited May 30, 2011 at 23:29

alex

492k205 gold badges890 silver badges992 bronze badges

answered Jul 7, 2010 at 21:52

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jsConfused Over a year ago

Not sure I get your first point - I think there is only a duplication if you uncomment the importjs. But your main contribution (changing "script.onload" to "scpt.onload") did the trick. Thanks!!!!!

gblazex Over a year ago

yes I was talking about that duplication. if you remove your html script tag you're good to go.

jsConfused Over a year ago

update: it works on every browser I've tried except for IE (I've only tested on IE8 so far). Any further suggestions?

gblazex Over a year ago

alright, I've forgot the IE specific part. Updated the answer. Now it works.

jsConfused Over a year ago

You rock! Works like a charm! Two more questions: 1) do you grant a license to me to use this script in my code? 2) is there a simpler way to do a simpler version of this question: I want to create a widget includable on any webpage. So far, the only code I need for this falls in two libraries: mine and jQuery, but I need to make sure jQuery loads before my code runs. Your code will work for this but seems a bit excessively nice/powerful for it. Also, I will have no control over the jQuery version on the rest of the page, so I want to avoid version conflicts. Thoughts?

|

Collectives™ on Stack Overflow

why isn't jQuery loading?

1 Answer 1

UPDATE

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related