Checking a jquery plugin exists before using it

July 26, 2011

programming website development html javascript jquery

David Jones
@david3jones

When creating a simple static website we all know there often isn’t the need to include all the javascript libraries you have on every page. For example i often use fancybox for some nice popups of google maps etc so i will only need to include the fancybox jquery plugin on the contact us page and maybe a gallery page if i happen to use it there too. This works great but because i also keep my javascript which enables the plugins in a seperate file called common.js i run into a problem where i will get a few errors on the other pages saying it didn’t understand the property or function fancybox() because i didn’t include the library on those pages. Sometimes this error can then prevent further javascript from executing and cause all kinds of problems you may be unaware of. A simple solution is to use a little check like this to make sure you have a plugin loaded or not.

if(jQuery().fancybox)
{
         // jquery fancybox is there now we can use it!
         $(".iframe").fancybox();
} else {
         // jquery fancybox hasn't been loaded
}

In this example i have just used fancybox but you should be able to use this in any other plugin such as the nivo slider etc. This has become a common practice for me now just as i would use isset in php i now use this in javascript.

Comments

# hups
November 10, 2011

hello how can i load all fancybox.js with mousscroll and easing.

sorry for bad english .

i will chek my website if fancybox already been loadet

for examble i have jquery load

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("");
    }
    setTimeout("initJQuery()", 50);
}  else {
                    
    $(function() {  
        //do anything that needs to be done on document.ready
    });
}

}

initJQuery();

an this for fancybox that was great.

can you help me ??

# davidejones
November 10, 2011
hmm well for a more advanced loading/checking you might want to try using a javascript library like modernizr or yepnope (which is part of the modernizr)
http://www.modernizr.com/docs/#load http://yepnopejs.com/
You can load a js file and set conditions when it couldn’t load it etc
# hups
November 14, 2011
ok i have found it
if (typeof $.fancybox == ‘function’) { //alert(‘fancybox has been already loaded so there is nothing left todo’); }else {
//alert(‘I detected nada so I will load the fancybox js file ‘+pfad); document.write(’’);
document.write(’’);
document.write(’’);
document.write(’’); }

Comments are currently closed

Checking a jquery plugin exists before using it

Related

Comments