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
<!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: 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:
Example
<!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>