IE9 - SCRIPT5009: "jQuery" is undefined

Question

the following code runs into the error SCRIPT5009: "jQuery" is undefined in IE9 (maybe also in older IE versions):

var $tx;
if (window.jQuery) {
    $tx = jQuery;
    if( jQuery().jquery.replace(".", "") < 17.1 ) {
        addjQuery();
    }   
} else {
    addjQuery();
}
function addjQuery() {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>');
    document.write('<script type="text/javascript">$tx = jQuery.noConflict();<\/script>');
}
document.write('<script src="workingScript.js"><\/script>');

I solved it! It's working fine this way:

var $tx;
if (window.jQuery) {
    $tx = jQuery;
    if( jQuery().jquery.replace(".", "") < 17.1 ) {
        addjQuery();
    }   
} else {
    addjQuery();
}
function addjQuery() {
    loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", function(){
        $tx = jQuery.noConflict(true);
    });
}
document.write('<script src="workingScript.js"><\/script>');

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

workingScript.js:

(function ($) {
    // some code here
})($tx);

The error occours here "$tx = jQuery.noConflict();" if addjQuery function is called. If the website already uses the current jQuery version, erverythings works fine.

Does anyone have an idea how to solve this?

Checking again with window.jQuery? What is the best solution? — Ingo Just, Apr 07 '13 at 14:39

score 3 · Accepted Answer · edited May 23 '17 at 10:29

3

Your script loads other scripts during its execution, they won't execute synchronously but rather asynchronously. When $tx = jQuery.noConflict(); executes there is no guarantee the jQuery loaded.

If you need to do it synchronously see this question , or better yet use something like RequireJS that handles this for you. (It also allows that sort of fallback).

edited May 23 '17 at 10:29

Community

1
1

answered Apr 07 '13 at 14:41

Benjamin Gruenbaum

270,886
87
504
504

You're very welcome, if my answer was useful to you please consider up-voting it. If it solved your problem please consider accepting it. – Benjamin Gruenbaum Apr 07 '13 at 14:51
@BenjaminGruenbaum note you need some basic reputation to upvote. I have that reputation ;-) – John Dvorak Apr 07 '13 at 14:57
createXMLHttpObject isn't really a method, it's just a name he used in that answer to illustrate his point. I like the second answer better because it is not synchronous but callback based though. – Benjamin Gruenbaum Apr 07 '13 at 17:26
@BenjaminGruenbaum you mean Alan Joseph's answer? – Ingo Just Apr 07 '13 at 17:40
@BenjaminGruenbaum thank you so much, the callback based approach is perfect. I added my solution above. – Ingo Just Apr 08 '13 at 01:54

IE9 - SCRIPT5009: "jQuery" is undefined

1 Answers1