Include the jquery file dynamically

Question

I want to include the jquery file dynamically when I need to it.
But there is a problem, the error message that appear $ is not defined

What I done:

// include the file dynamically.
var parent, script;
parent = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.type = "text/javascript";
script.src = "includes/jquery.js";
parent.appendChild(script);

// The usage
$('#box').remove();

Does the error not occur if you include the script with a script tag? — Reinstate Monica Cellio, Feb 18 '14 at 12:56
@Archer: yes, not occur if you include the script with a script tag. — Lion King, Feb 18 '14 at 12:57
Possibily you can use this, [check here](http://stackoverflow.com/questions/1973647/dynamically-including-jquery-using-javascript-if-its-not-already-present) — Shankar, Feb 18 '14 at 12:57
@Pilot: Your answer works fine, but I wait maybe there is another way. — Lion King, Feb 18 '14 at 13:02
Possible duplication of SO Question, http://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery — dreamweiver, Feb 18 '14 at 13:02
@LionKing That is the best way to do it. Using callbacks is, quite simply, correct. — Reinstate Monica Cellio, Feb 18 '14 at 13:10

score 1 · Answer 1 · answered Feb 18 '14 at 12:57

1

Handle onload event to make sure your script is loaded before you use it

script.onload = function () { $('#box').remove() }
parent.appendChild(script);

answered Feb 18 '14 at 12:57

Deepak Ingole

14,912
10
47
79

Your answer works fine on modern browsers, but this solution does not work fine on at least IE 7. – Lion King Feb 18 '14 at 13:07
1

@LionKing did you really test it or blind test?..it will work in all browser.. – Deepak Ingole Feb 18 '14 at 13:09
No, not blind test, I have IE 6,7 and firefox and chrome. works fine on `ff` and `chrome` and `IE9`, but `IE 6, 7` does not work. – Lion King Feb 18 '14 at 13:13

score 1 · Accepted Answer · answered Feb 18 '14 at 13:13

For IE, I think you need to use the onreadystatechange callback. E.g.

script.onload = script.onreadystatechange = function() {
if (!script.readyState || script.readyState == 'loaded' ||
    script.readyState == 'complete') {
  $('#box').remove();
}
};

score 0 · Answer 3 · answered Feb 18 '14 at 14:02

try this:

(function () {

function loadScript(url, callback) {

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("includes/jquery.js", function () {

     //jQuery loaded
     console.log('jquery loaded');
     $('#box').remove();

});


})();

Include the jquery file dynamically

3 Answers3