Script not executing with a dynamically generated JQuery script tag

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.

jfriend00 · Accepted Answer · 2012-05-08 21:49:16Z

3

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:

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

edited May 8, 2012 at 21:49

answered May 8, 2012 at 21:44

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

C King Over a year ago

Awesome! Initialization code? Smack my head. Dunno why it didn't occur to me. Great answer. Thanks!

C King Over a year ago

Tried doing the initialization code using if-then controls, onload events, settimeout, and a few other ways but am having no luck; still getting '$ not defined'. Alas, my limited coding experience can only take me so far. I'd really appreciate some guidance. Not grasping the require.js thing either. Thanks again for the help.

C King Over a year ago

Ok. Read an article at hunlock dot com and figured it out. Wrapped the '$document.ready(...' in a function and called it using onload event of the variable 'script'. Thanks again for the help.

Lyn Headley · Accepted Answer · 2012-05-08 21:43:08Z

0

It sounds like you are having an issue with load order. The '$ is not defined' error is triggered because jQuery is not yet loaded. Then you load jQuery. This of course does not reload your first script, so the error stands.

answered May 8, 2012 at 21:43

Lyn Headley

11.6k4 gold badges36 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:04:51Z

-1

This has been answered here: Check if jQuery is included in Header (Joomla)

 if (typeof jQuery == 'undefined') { 
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'jQuery';
   script.type = 'text/javascript';
   script.src = 'js/jquery.js';
   head.appendChild(script); 
}

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered May 8, 2012 at 21:43

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

1 Comment

lucuma Over a year ago

You could also use something like require.js. requirejs.org/docs/jquery.html

Collectives™ on Stack Overflow

Script not executing with a dynamically generated JQuery script tag

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related