CODEWITHSUNDEEP
jquery
Tony
Tony

Reputation: 12695

test if jQuery library is loaded and the '$ is not defined' error

in my .js file which will be using by external users I want to check if on their's page the jQuery lubrary is loaded. To do so, I'm using:

if (!window.jQuery) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}    

$(document).ready(function () {
    //do some jquery $.ajax({}); stuff
});

but, at the $(document).ready(function () { line I get the error message ReferenceError: $ is not defined How to fix it ?

edit:

I've added the line 

if (!window.jQuery) {
    ...
    document.getElementsByTagName('head')[0].appendChild("<script type='text/javascript'>$(document).ready(function () {...});</script>");
}

and now I get the NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLHeadElement.appendChild]

Upvotes: 1

Views: 2579

Answers (4)

Adam Jenkins
Adam Jenkins

Reputation: 55643

Remove the document.ready part, and, in a separate script tag beneath the one you are using to append jQuery to the head, do this:

<script>
 window.onload = function() {
   //do the same code in here as you would've done in document.ready
 }
</script>

EDIT

The comment below makes a good point...in that case, you do this:

<script>
 (function() {
     var load = function() {
       //do the same code in here as you would've done in document.ready
     };

     if(window.addEventListener) {
        window.addEventListener('load',load);
     } else {
        window.attachEvent('onload',load);
     }
 }());
</script>

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Something like this

if( window.jQuery === undefined ) {
    //create script tag for appending script source
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    //check for IE
    if( scriptTag.readyState ) {
        scriptTag.onreadystatechange = function() {
            if( scriptTag.readyState == 'loaded' || scriptTag.readyState == 'complete' ) {
                scriptTag.onreadystatechange = null;
                scriptHandler();
            }
        };
    }
    else {
        scriptTag.onload = function() {
            scriptHandler();
        };
    }
    scriptTag.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js";
    ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( scriptTag );
}
else {
    jQuery = window.jQuery;
    process();
}

function scriptHandler() {
    jQuery = window.jQuery.noConflict( true );
    process();
}
function process() {
    jQuery(document).ready(function($) {
        //use $ here
    });
}

Upvotes: 0

Just_Mad
Just_Mad

Reputation: 4077

In such cases people are usually asked to try something like require.js... If you do not want to use it, you can try to set your own handlers to catch the moment when jquery finishes loading.

if (!window.jQuery) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    var loadHandlerAlreadyRun = false;
    script.onload = function() {
        if (!loadHandlerAlreadyRun) {
           loadHandlerAlreadyRun = true;
           onLoadHandler();
        }
    };
    script.onreadystatechange = function() {
        if (!loadHandlerAlreadyRun && (this.readyState === "loaded" || this.readyState === "complete")) {
            loadHandlerAlreadyRun = true;
            onLoadHandler();
        }
    }
}    

function onLoadHandler() {
    $(document).ready(function () {
        console.log("jquery loaded");
        //do some jquery $.ajax({}); stuff
    });

}

Try it here

Upvotes: 1

Sirwan Afifi
Sirwan Afifi

Reputation: 10824

you can check with code :

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

Upvotes: 0

Related Questions