241

Is there any way to check if a particular plugin is available?

Imagine that you are developing a plugin that depends on another plugin being loaded.

For example I want the jQuery Validation plugin to use the dateJS library to check if a given date is valid. What would be the best way to detect, in the jQuery Valdation plugin if the dateJS was available?

1

8 Answers 8

384

Generally speaking, jQuery plugins are namespaces on the jQuery scope. You could run a simple check to see if the namespace exists:

 if(jQuery().pluginName) {
     //run plugin dependent code
 }

dateJs however is not a jQuery plugin. It modifies/extends the javascript date object, and is not added as a jQuery namespace. You could check if the method you need exists, for example:

 if(Date.today) {
      //Use the dateJS today() method
 }

But you might run into problems where the API overlaps the native Date API.

3
  • 67
    if(jQuery.fn.pluginName) {...} is another option
    – Nagyman
    Jun 16, 2010 at 14:55
  • 6
    Maybe a little overkill, but if ($.isFunction(jQuery.fn.pluginName)) { ... } will also ensure that it's at least a function.
    – Noyo
    Sep 3, 2013 at 17:46
  • i have a function that load the script, ` LoadScript (location,namespcae,callBack)` , callback function is warped under an interval, means until the namespace i.e window.jQuery is not set the callback will not run, it work fine but now im tring to load a j query plugin and to check that , i need to call jquery select function like jQuery().pluginName, but when i pass it my function parameter like LoadScript("jquery+plugin.js",jquery().plugin) jquery() dose not exist yet Apr 15, 2016 at 15:54
110

If we're talking about a proper jQuery plugin (one that extends the fn namespace), then the proper way to detect the plugin would be:

if(typeof $.fn.pluginname !== 'undefined') { ... }

Or because every plugin is pretty much guaranteed to have some value that equates to true, you can use the shorter

if ($.fn.pluginname) { ... }

BTW, the $ and jQuery are interchangable, as the odd-looking wrapper around a plugin demonstrates:

(function($) {
    //
})(jQuery))

the closure

(function($) {
    //
})

is followed immediately by a call to that closure 'passing' jQuery as the parameter

(jQuery)

the $ in the closure is set equal to jQuery

4
  • 2
    I made a function function isPluginLoaded(plugin) { return !!$.fn[plugin] }
    – styfle
    Aug 9, 2012 at 22:57
  • 2
    The first example should be if(typeof $.fn.pluginname != 'undefined')
    – dops
    Sep 30, 2014 at 10:35
  • 1
    @dops is correct and I have edited the answer accordingly, although I have used a negated triple rather than double equals equality to compare both type and value.
    – pwdst
    Dec 10, 2014 at 15:34
  • 1
    $ and jQuery are not always interchangeable, as jQuery can be (such as in WordPress) loaded in no-conflict mode. This has caused me to always use the shorthand, no-conflict-safe document ready: jQuery(function($) { // $ is safe in here.... }); or, as you point out, the closure pattern: (function($) { // $ is safe in here.... })(jQuery);, depending on my mood / need. (BTW, upvoted, as the check you recommend is the one I prefer) May 24, 2018 at 21:12
11

To detect jQuery plugins I found more accurate to use the brackets:

if(jQuery().pluginName) {
    //run plugin dependent code
}
8

for the plugins that doesn't use fn namespace (for example pnotify), this works:

if($.pluginname) {
    alert("plugin loaded");
} else {
    alert("plugin not loaded");
}

This doesn't work:

if($.fn.pluginname)
1
  • Thanks. Another example - Jquery Cookie plugin
    – ymakux
    May 2, 2014 at 12:49
2

Run this in your browser console of choice.

if(jQuery().pluginName){console.log('bonjour');}

If the plugin exists it will print out "bonjour" as a response in your console.

2

jQuery has a method to check if something is a function

if ($.isFunction($.fn.dateJS)) {
    //your code using the plugin
}

API reference: https://api.jquery.com/jQuery.isFunction/

1

I would strongly recommend that you bundle the DateJS library with your plugin and document the fact that you've done it. Nothing is more frustrating than having to hunt down dependencies.

That said, for legal reasons, you may not always be able to bundle everything. It also never hurts to be cautious and check for the existence of the plugin using Eran Galperin's answer.

-1

This sort of approach should work.

var plugin_exists = true;

try {
  // some code that requires that plugin here
} catch(err) {
  plugin_exists = false;
}
1
  • 6
    Almost tempted to downvote for catching what you can (and should) easily detect
    – pwdst
    Dec 10, 2014 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.