How to check if a jQuery plugin is loaded?

02 Jun, 2020
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
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 fileExample 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.htmlhtml<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JQuery Plugin</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </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>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.JavascriptJavascriptif ($.ui) {    console.log('jquery-ui is loaded successfully')}Note: For all the jQuery plugins that do extend the fn namespace, the correct way to check is:JavascriptJavascript<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>The $.fn.pluginname extends the jQuery objects and is a function callable on all jQuery.init objects whereas the $.pluginname extends the $ object itself.
html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JQuery Plugin</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </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>
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
if ($.ui) {    console.log('jquery-ui is loaded successfully')}
Note: For all the jQuery plugins that do extend the fn namespace, the correct way to check is:
Javascript
<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>
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.htmlJavascriptJavascript<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>Note: The jQuery function jQuery() returns a new jQuery.init object. The jQuery() is also replacable with the $() operator in most cases.
Javascript
<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>
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:
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:
jQuery-Plugin
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?