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.
Example
Try this code »<!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>
// 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>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:
Example
Try this code »<!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>
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.
Example
Try this code »<!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>
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>
