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 Jun 29 '12 at 15:21 — Ian, Jun 29 '12 at 15:21

Ian · Answer 1 · 2012-06-29T15:24:36.740

2

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

edited Jun 29 '12 at 15:24

answered Jun 29 '12 at 15:19

Ian

50,146
13
101
111

score 1 · Answer 2 · edited May 23 '17 at 11:56

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);

score 1 · Answer 3 · answered Jun 29 '12 at 15:23

1

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);

answered Jun 29 '12 at 15:23

iwiznia

1,669
14
21

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? – skeddles Jun 29 '12 at 15:29
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) – iwiznia Jun 29 '12 at 15:36

Luca Matteis · Answer 4 · 2012-06-29T15:34:09.813

0

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
}

edited Jun 29 '12 at 15:34

answered Jun 29 '12 at 15:19

Luca Matteis

29,161
19
114
169

why does this make a difference? – Anish Gupta Jun 29 '12 at 15:19
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! – skeddles Jun 29 '12 at 15:36

score 0 · Answer 5 · answered Jun 29 '12 at 15:27

0

try

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

answered Jun 29 '12 at 15:27

Mike

1,042
1
8
14

Dynamically load jquery in IE

5 Answers5