jQuery No-Conflict


jQuery in Combination with Other JavaScript Libraries


As you might be aware, the dollar sign ($) is used as a shortcut or alias for jQuery. Conflicts may arise if you use another JavaScript library that also uses the $ sign as a shortcut on the same page as the jQuery library. Fortunately, jQuery has a special method called noConflict() that can be used to handle such situations.


The noConflict() method


The jQuery noConflict() method gives other libraries ownership of the $ identifier. In order to prevent conflicts with the prototype system, the jQuery code in the following example will automatically bring jQuery into no-conflict mode after it is loaded onto the page and assign a new variable name $j to replace the $ alias. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 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>
Live Demo!


Prioritizing jQuery Over Other Libraries


To avoid conflicts, the above solutions depend on jQuery being loaded after the prototype.

The js library has been loaded. If you use jQuery before other libraries, you can prevent conflicts by using the full name jQuery in your jQuery code instead of calling the jQuery noConflict() method. The $, on the other hand, will have the sense specified in the other library in this case.



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script>
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 fine as expected, 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>
Live Demo!