As is already seen in the previous tutorial, jQuery uses the dollar sign ($) as a shortcut or alias for jQuery. Thus, conflicts could occur if another JavaScript library also uses the $ sign as a shortcut, alongside the jQuery library on the same page. Fortunately, a special method named noConflict() has been provided by jQuery to deal with such a situation.
In the jQuery.noConflict() method, the control of the $ identifier is returned to other libraries. The jQuery code in the example below (line no-10) will put the jQuery into no-conflict mode immediately it is loaded onto the page and substitute $ alias with a new variable named $j to avoid conflicts with the prototype framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Putting jQuery into No-Conflict Mode using New Shortcut</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.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>
<p>Click these buttons to check whether the jQuery and Prototype JavaScript libraries are working without any conflict or not.</p>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>
However, if another shortcut for jQuery isn’t preferred so as not to modify existing jQuery the use of $ is most suitable for you because it saves time and is easy to use, then another quick approach of passing the $ as an argument to jQuery(document).ready() function can be adopted, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Putting jQuery into No-Conflict Mode without Using New Shortcut</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.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>
<p>Click these buttons to check whether the jQuery and Prototype JavaScript libraries are working without any conflict or not.</p>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>
The above solutions on how to avoid conflicts rely on jQuery, it is loaded after prototype.js is loaded. However, if jQuery is included far before other libraries, you may use the full name jQuery in your jQuery code to avoid conflicts without calling the jQuery.noConflict(). But the $ will have the meaning defined in the other library in this situation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Avoiding Conflicts when Including jQuery Before other Library</title>
<script src="https://code.jquery.com/jquery-3.5.1.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 working well with jQuery.");
});
});
</script>
</head>
<body>
<p>Click these buttons to check whether the jQuery and Prototype JavaScript libraries are working without any conflict or not.</p>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>