Load jQuery Dynamically

Sometimes you have to load jQuery, but you don’t know if it has already been referenced somewhere else in the website. 

This tends to happen if you have a custom web control, delivered in an assembly, that relies on jQuery.

This code has been ripped out of my application, and may have a typo or three, but it gives you the general idea.

 

var jQueryScriptOutputted = false;
function initJQuery() {
    
    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {
    
    
        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;
            
            //output the script (load it from google api)
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {
                        
        $(function() {  
            //do anything that needs to be done on document.ready
        });
    }
            
}
initJQuery();

 

More later - joel

Published Thursday, May 07, 2009 4:05 PM by joelvarty
Filed under: , ,

Comments

# re: Load jQuery Dynamically

Thursday, May 07, 2009 11:40 PM by Michael

What about simply using:

Page.ClientScript.RegisterClientScriptInclude("jquery", "ajax.googleapis.com/.../jquery.min.js");

# re: Load jQuery Dynamically

Friday, May 08, 2009 8:50 AM by joelvarty

Yea - that's what you should do if you are writing code in the actual application itself.  This example is more for code written in a custom control which may be used in ANY application, and you don't know if jQuery is actually loaded yet.

# re: Load jQuery Dynamically

Friday, May 08, 2009 11:16 AM by webbes

I'd prefer an error message that states that jQuery is not loaded and that your controls depend on jQuery. It's up to the developer then where and how he seems fit to load jQuery.

With your approach I could end up with a hundred initJQuery(){...} method declarations in my page. Which wouldn't work all together.

Cheers,

Wes

# re: Load jQuery Dynamically

Friday, May 08, 2009 11:22 AM by joelvarty

Good point.  

What I did was put that code into a RegisterStartUpScript with a key, so that wasn't an issue.

# re: Load jQuery Dynamically

Tuesday, July 28, 2009 7:39 PM by Lev

Thanks for this great example, I was looking for something just like for an embedded widget distribution system I'm working on.

# re: Load jQuery Dynamically

Thursday, August 27, 2009 12:35 PM by Alex S

This is exactly what i was looking for. Not only that it checks if jQuery is already loaded, but it loads it dynamically too from Google API. This is a great help since we have lots of customers that load a script from our server and i wanted to add a jQuery reference. My option was to output jQuery inside our script and let it load very very slow, or find a way to include the code from Google API. Of course there's the Google way to load it, but that pretty much means i have to load Google's codes too and i wouldn't be saving much. You just helped me save 90% of our bandwidth with this.

# re: Load jQuery Dynamically

Monday, August 31, 2009 9:02 AM by e-turhan

thank u much, worked fine.

# re: Load jQuery Dynamically

Friday, November 27, 2009 11:31 AM by Simon

Thanks, you saved my day ;)

Leave a Comment

(required) 
(required) 
(optional)
(required)