JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery No-Conflict Mode

In this tutorial you will learn how to avoid conflicts between jQuery and other JavaScript library or framework.

Using jQuery with Other JavaScript Libraries

As you already know, jQuery uses the dollar sign ($) as a shortcut or alias for jQuery. Thus, if you use another JavaScript library that also uses the $ sign as a shortcut, along with the jQuery library on the same page, conflicts could occur. Fortunately, jQuery provides a special method named noConflict() to deal with such situation.

jQuery noConflict() Method

The jQuery.noConflict() method return the control of the $ identifier back to other libraries. The jQuery code in the following example (line no-10) will put the jQuery into no-conflict mode immediately after it is loaded onto the page and assign a new variable name $j to replace the $ alias in order to avoid conflicts with the prototype framework.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery noConflict() Demo</title>
  • <script src="js/prototype.js"></script>
  • <script src="js/jquery.js"></script>
  • <script type="text/javascript">
  • // Defining the new alias for jQuery
  • var $j = jQuery.noConflict();
  • $j(document).ready(function(){
  •     // Display an alert message when the element with ID foo is clicked
  •     $j("#foo").click(function(){
  •         alert("jQuery is working well with prototype.");
  •     });
  • });
  •  
  • // Some prototype framework code
  • document.observe("dom:loaded", function(){
  •     // Display an alert message when the element with ID bar is clicked
  •     $(bar).observe('click', function(event){
  •         alert("Prototype is working well with jQuery.");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <button type="button" id="foo">Run jQuery Code</button>
  •     <button type="button" id="bar">Run Prototype Code</button>
  • </body> 
  • </html>

Note: Many JavaScript libraries use the $ as a function or variable name, just like the jQuery. Some of these libraries are: mootools, prototype, zepto etc.

However, if you don't want to define another shortcut for jQuery, may be because you don't want to modify your existing jQuery code or you really like to use $ because it saves time and easy to use, then you can adopt another quick approach — simply pass the $ as an argument to your jQuery(document).ready() function, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery noConflict() Demo</title>
  • <script src="js/prototype.js"></script>
  • <script src="js/jquery.js"></script>
  • <script type="text/javascript">
  • jQuery.noConflict();
  • jQuery(document).ready(function($){
  •     // The dollar sign in here work as an alias to jQuery
  •     $("#foo").click(function(){
  •         alert("jQuery is working well with prototype.");
  •     });
  • });
  •  
  • // Some prototype framework code
  • document.observe("dom:loaded", function(){
  •     // The dollar sign in the global scope refer to prototype
  •     $(bar).observe('click', function(event){
  •         alert("Prototype is working well with jQuery.");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <button type="button" id="foo">Run jQuery Code</button>
  •     <button type="button" id="bar">Run Prototype Code</button>
  • </body> 
  • </html>

Including jQuery Before Other Libraries

The above solutions to avoid conflicts rely on jQuery is being loaded after prototype.js is loaded. However, if you include jQuery before other libraries, you may use full name jQuery in your jQuery code to avoid conflicts without calling the jQuery.noConflict(). But in this scenario the $ will have the meaning defined in the other library.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery noConflict() Demo</title>
  • <script src="js/jquery.js"></script>
  • <script src="js/prototype.js"></script>
  • <script type="text/javascript">
  • jQuery(document).ready(function($){
  •     // Use full jQuery function name to reference jQuery
  •     jQuery("#foo").click(function(){
  •         alert("jQuery is working well with prototype.");
  •     });
  • });
  •  
  • // Some prototype framework code
  • document.observe("dom:loaded", function(){
  •     // The dollar sign here will have the meaning defined in prototype
  •     $(bar).observe('click', function(event){
  •         alert("Prototype is working well with jQuery.");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <button type="button" id="foo">Run jQuery Code</button>
  •     <button type="button" id="bar">Run Prototype Code</button>
  • </body> 
  • </html>

Your Feedback:

We would love to hear from you, please drop us a line.