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 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 an 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
<!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>
|
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.html
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 replaceable 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: