Question

I have the following code in an external JS file (ie: test.js); which creates an additional script tag pointing to a JQuery source if it detects that a JQuery source isn’t already there. The code actually creates the script tag and inserts it before the actual script that’s doing the creating:

if (typeof(jQuery) == "undefined") {
 var head = document.getElementsByTagName("head")[0];
 // get any and all script tags 
 var scripts = document.getElementsByTagName("script");
 // the actual script call the actions (ie: this one "test.js")
 thisScript = scripts[scripts.length - 1];
 // create element
 var script = document.createElement("script");
 script.setAttribute("type", "text/javascript");
 script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
head.insertBefore(script,thisScript); 
}

The above works fine. However, the problem I’m having is that once the JQuery source script tag is created, the rest of the code on “test.js” doesn’t work. It’s as if the code can’t access the JQuery functions (or doesn’t know that JQuery is there).

Thus, the following code on “test.js” doesn’t work:

$(document).ready(function() {

 // ...

});

The error I’m getting according to FireBug with FF 12 is: “$ is not defined”
Any ideas as to why this is happening or how I can fix it?

NOTE: I know I can just place JQuery on target page; however, that isn’t an option as
the code has to be able to detect if JQuery is there; and if not, then create the script tag pointing to JQuery and run the Jquery code.

Answer 1

When you insert a script tag manually like you are doing, that script is loaded asynchronously. That means that other parts of the page will NOT wait for that script to be loaded.

This is different than if the script tag is present in the source of the page because in that case, the script will load synchronously and other parts of the page will not execute until after that script is loaded.

The result of this is that the rest of your page javascript is executing BEFORE the dynamically inserted script tag has been loaded, parsed and run. Thus, you are trying to use jQuery before it’s been installed.

I’m aware of two options for solving your issue:

1. Change the insertion of your jQuery script tag to something that loads synchronously. The only way I know of to do that is to use document.write() to write the new script tag to your document, not insert it into the head section like you’re doing. Stuff that is added to the document with document.write() is processed synchronously.

2. Continue to insert your script dynamically like you are doing, but add a monitoring event so you will know when the script has been loaded successfully and only run your initialization code that uses jQuery AFTER you get that notification that jQuery has been successfully loaded.

There are also script loading libraries (such as require.js) that will do the second option for you.