jQuery No-Conflict Mode

Using jQuery with Other JavaScript Libraries

As you may already know, jQuery uses the dollar sign ($) as a shortcut or alias for jQuery. If another JavaScript library also uses $ as a shortcut and both libraries are used on the same page, conflicts can arise. To address this, jQuery provides a special method called noConflict().

jQuery noConflict() Method

The jQuery.noConflict() method relinquishes control of the $ identifier back to other libraries. In the following example (line no-10), jQuery is put into no-conflict mode immediately after being loaded on the page. It assigns a new variable name $j to replace the $ alias, thereby avoiding 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>

Note: Several JavaScript libraries use the $ as a function or variable name, similar to jQuery. Some of these libraries include: mootools, prototype, zepto, etc.

However, if you prefer not to define an additional shortcut for jQuery—perhaps because you wish to avoid modifying existing jQuery code or simply find using $ more convenient and time-saving—you can adopt an alternative quick approach. Simply pass $ 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 solutions mentioned above to prevent conflicts assume that jQuery is loaded after prototype.js. However, if you include jQuery before other libraries, you can use the full name jQuery in your jQuery code to avoid conflicts without needing to call jQuery.noConflict(). In this case, the $ sign will retain 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>