Search jQuery

jQuery Forum

Getting Started

ionline247

Loading jQuery if undefined

in Getting Started • 8 years ago

I found a great post on this topic:

Only load jQuery if not already present

I'm pretty new to javascript, but understand general programming constructs. My question is with this code:

/******** Load jQuery if not present *********/
if (typeof jQuery === "undefined" || jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
      "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
    script_tag.onload = main; // Run main() once jQuery has loaded
    script_tag.onreadystatechange = function () { // Same thing but for IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') main();
    }
    document.getElementsByTagName("head")[0].appendChild(script_tag);
} else {
    main();
}

How do I not run main() after jQuery is loaded and jump right into $(document).ready instead?

Cheers,

Matt

Replies(5)

jay.blanc..

Re: Loading jQuery if undefined

8 years ago

If JavaScript is enabled in the browser and jQuery is loaded then $(document).ready will be available as soon as the DOM is loaded, there is no need to jump to it.

xavier.le..

Re: Loading jQuery if undefined

8 years ago

Me thinks you should write

if ( typeof jQuery === undefined )

Without the double quotes.

I suppose here that when you append script_tag it is an asynchronous process, which is why you define .onload().

As far as I can see if you define $(document).ready() right after the if.then.else then jQuery is not yet loaded, so it will trigger an error.

I would define $(document).ready() in main ();

Keep us posted, I am interested.

ionline247

Re: Loading jQuery if undefined

8 years ago

Here's what I've tested and learned... This bit of code works great:

<script type="text/javascript">
/******** Load jQuery if not present *********/
if (typeof jQuery === "undefined" || jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
script_tag.onload = main; //Run main() once jQuery has loaded
script_tag.onreadystatechange = function () { //Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') main();
} //onreadystatechange.function
document.getElementsByTagName("head")[0].appendChild(script_tag);
} else {
main();
} //if.jQuery
function main() {
$(document).ready(function() {
alert('jQuery Library Loaded');
});
} //function.main
</script>

I get the alert as expected. What I'd like to not have to do is have a function called main in all of my code. What I'd like to do is have the jQuery library loaded, but fire $(document).ready(function() { code; }); directly after. I've tried a few different ways to fire some code without a named function, but have failed mostly. I have added a few anonymous function calls instead of main, but after doing that, jQuery is now undefined. Here's where I'm at with it:

<script type="text/javascript">
/******** Load jQuery if not present *********/
if (typeof jQuery === "undefined" || jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
script_tag.onload = (function(){}); //Run main() once jQuery has loaded
script_tag.onreadystatechange = function () { //Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') (function(){});
} //onreadystatechange.function
document.getElementsByTagName("head")[0].appendChild(script_tag);
} else {
(function(){});
} //if.jQuery
function main() {
jQuery(document).ready(function() {
alert('jQuery Library Loaded');
});
} //function.main
$(document).ready(function() {
alert('jQuery Library Loaded with doc.ready');
});
</script>

I've also tried using (jQuery); instead of the anon function call... What do you think I'm doing wrong here? Am I forced to call a named function using this asynchronous call? Anyone have something clever I can try out? It'd really help a lot with what I'm trying to build.

Cheers,

Matt

xavier.le..

Re: Loading jQuery if undefined

8 years ago

What I can think of is to have:

script_tag.onload = function () { alert ( 'This code is run when jQuery has loaded' ); };

Without the brackets around the function.

And have:

} else {
alert ( 'This code is run when jQuery is already loaded' );
}

Now we have to put proper code instead of just alerts, which ends like:

<script type="text/javascript">
main = function () { alert ( 'This will be used to trigger when document is ready' ); }; // We define it once, call it in 2 different places
/******** Load jQuery if not present *********/
if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
script_tag.onload = function () { $( document ).ready ( main ) }; //Run main() once jQuery and document have loaded
script_tag.onreadystatechange = function () { //Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') (function(){});
} //onreadystatechange.function
document.getElementsByTagName("head")[0].appendChild(script_tag);
} else {
$( document ).ready ( main );
} //if.jQuery