How to check if a jQuery plugin is loaded?

There are multiple ways by which we can simply check whether the jQuery plugins are loaded successfully or not using jQuery. We can also check whether a particular function within the plugin is accessible or not. This tutorial will demonstrate how to check if a jQuery plugin is loaded or not. 
 

  • Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site and to load jQuery using CDN (Content Delivery Network). We will install Browsersync globally.
    npm install -g browser-sync
  • Step 2: We will be using jQuery-UI plugin for this tutorial. We will test whether this plugin is successfully loaded or not using jQuery. Download the latest version of this plugin and extract it to your project root folder.
  • Step 3: Create a index.html file
    Example 1: The jQuery plugins are namespaces on the jQuery scope. The jquery-ui plugin does not extend the fn namespace, hence we can check if the plugin is loaded successfully by using the above code. ui represents the name of the plugin and can be replaced with the plugin name to be checked. We have loaded jQuery in the head tag because it needs to be available before it can be used in the application. It is recommended practice to load all JavaScript files at the end of the body tag for increasing performance and render the page faster. Hence, we have used the $(document).ready() function before we can check if the plugin was loaded successfully or not. 
    The typeof operator returns the data type of its operand in the form of a string. In this case, the operand is the jQuery $ operator itself.

    html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery Plugin</title>
        <script src=
        </script>
    </head>
    <body>
        <div>Hello GeeksForGeeks</div>
        <script type="text/javascript">
            $(document).ready(function () {
                if (typeof $.ui !== 'undefined') {
                    console.log('jquery-ui is loaded successfully')
                }         
            });
        </script>
        <script src="jquery-ui-1.12.1/jquery-ui.js" 
                type="text/javascript"></script>
    </body>
    </html>

    chevron_right

    
    

    Example 2: Since every plugin is guaranteed to have some function definitions or values that equate to true, we can use the shorter version as shown in the code.

    Javascript



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    if ($.ui) {
        console.log('jquery-ui is loaded successfully')
    }

    chevron_right

    
    

    Note: For all the jQuery plugins that do extend the fn namespace, the correct way to check is:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script type="text/javascript">
    $(document).ready(function () {
        if (typeof $.fn.pluginname !== 'undefined') {
            console.log('jquery-ui is loaded - 2')
        }
        if ($.fn.pluginname) {
            console.log('jquery-ui is loaded - 3')
        }
    });
    </script>

    chevron_right

    
    

    The $.fn.pluginname extends the jQuery objects and is a function callable on all jQuery.init objects whereas the $.pluginname extends the $ object itself.

  • Step 4: We will now check if the plugin functions are accessible or not. This automatically signifies that the plugin itself has loaded successfully.
    index.html

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <input type="text" name="date" id="date">
    <script type="text/javascript">
       $(document).ready(function () {
           if (jQuery().datepicker()) {
              console.log('jquery-ui datepicker() function is accessible')
           }
           if (typeof $.fn.datepicker() !== 'undefined') {
               console.log('jquery-ui datepicker() function is accessible')
           }
           if ($.fn.datepicker()) {
               console.log('jquery-ui datepicker() function is accessible')
           }   
           $("#date").datepicker();
       });
    </script>

    chevron_right

    
    

    Note: The jQuery function jQuery() returns a new jQuery.init object. The jQuery() is also replacable with the $() operator in most cases.

  • Step 5: To launch the application using Browsersync, run the following command in the project directory:
    browser-sync start --server --files "*"

    This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.
    Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.