Question

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]

Answer 1

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>