Dynamically load jquery in IE

Question

So I want to load jquery as a back up if CSS transitions doesn't work. Using modernizer for that, and it works fine.

and jquery works fine if I include it in the header like

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

but not if I try to add it dynamically like

 var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")

or

 var jqueryscript = document.createElement("script"); jqueryscript.type = "text/css"; jqueryscript.setAttribute("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"); document.body.appendChild(jqueryscript);

do you get any javascript errors in the console?

Ian
– Ian

2012-06-29 15:21:18 +00:00
Commented Jun 29, 2012 at 15:21 — Ian
– Ian, Commented Jun 29, 2012 at 15:21

Ian · Accepted Answer · 2012-06-29 15:24:36Z

In your second snippet, you should be using:

jqueryscript.type = "text/javascript"; jqueryscript.src = "http://ajax.blahblahblah";

not

jqueryscript.type = "text/css"; jqueryscript.setAttribute("http://ajax.blahblahblah")

.setAttribute() takes two parameters - the first is the attribute name, the second is the value. Passing one value is invalid (I thought)...

iwiznia · Accepted Answer · 2012-06-29 15:23:44Z

Neither of the snippets is correct, try this one:

var headID = document.getElementsByTagName("head")[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; headID.appendChild(newScript);

That seems like it would work, but I'm still having trouble, is there something else I should put before I allow it to look at the jquery code? <code>
You shouldn't need to do anything else... what trouble are you having? Does the jQuery gets loaded? (you can try it in the console)

Community · Accepted Answer · 2017-05-23 11:56:20Z

For the first example, you must add the script tag to the document. Not doing so will create the element in memory but the browser does not bother to download the file:

var fileref = document.createElement("script"); fileref.setAttribute("type", "text/javascript"); fileref.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"); document.getElementsByTagName("head")[0].appendChild(fileref);

Note that using el.setAttribute("src", ...) and el.src = does not make a real difference (discussed here).

If you load JavaScript files this way, you must realize that the jQuery or $ variables will not be available until the file is loaded. You must wrap the code that uses jQuery inside a function and call the function after the script is loaded. A simple example:

function onScriptLoaded() { alert(jQuery.fn.jquery); // alerts jQuery version number } var fileref = document.createElement("script"); fileref.setAttribute("type", "text/javascript"); fileref.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"); fileref.onload = onScriptLoaded; fileref.onreadystatechange = function () { if (this.readyState == 'complete') { onScriptLoaded(); } } document.getElementsByTagName("head")[0].appendChild(fileref);

Mike · Accepted Answer · 2012-06-29 15:27:16Z

try

 document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><\/script>');

Luca Matteis · Accepted Answer · 2012-06-29 15:34:09Z

The issue might be that you can't use jQuery until it's executed, in which case you have to listen for an event, and run your jQuery code only after that event ran.

script.onload = script.onreadystatechange = function() { // run your jquery dependent code // only after this function ran }

Yup, this is correct. I was suspecting that this was happening since I was getting some errors about $ not being defined. It works in all browsers now, thank you!

Collectives™ on Stack Overflow

Dynamically load jquery in IE

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Linked

Related