jQuery noConflict() method

The $ (dollar) sign in jQuery is used as an alias or shortcut. Many JavaScript libraries also use the $ sign as the shortcut, along with the jQuery on the same page. But if two different frameworks use the same alias, a conflict could occur, and one of the frameworks might stop its working.

The noConflict() method implemented in jQuery to deal with such situations. It is used to avoid the conflict of using $ variable with other libraries. This method releases the hold on the $ (dollar) identifier so that other libraries can use it.

This method can also be used to create a new shortcut. This means we can use this method to create a custom alias name. If we don't want to define another shortcut, or if we like to use $ sign as it saves times and easy to use, then we can use a new approach; that is, we can pass the $ as an argument to the $(document).ready() function. It can be written as -

jQuery.noConflict();
jQuery(document).ready(function($){
 });

Syntax

The commonly used syntax of this method is given as follows.

It does not accept any argument.

Let's see some illustrations to understand how to use the noConflict().

Example1

In this example, we are using two JS libraries that are prototype and jQuery. Both of these libraries use $ as an alias, so we are using the noConflict() method to avoid conflict. The noConflict() method allows jQuery to release its hold over the $ identifier and make it available for other libraries. Here, another library is prototype.

When the document is loaded, jQuery goes into noConflict mode. Here, we are creating a new alias using the jQuery noConflict(). We are declaring a variable named as j and assigning the noConflict() method to it. Now, this variable will work as an alias for the jQuery code. This new alias will be used instead of using $. So, it avoids conflict with the prototype library.

We have to click the given button to see the effect.

<html> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script> 
var j = $.noConflict();
j(document).ready(function(){
j("#b1").click(function(){
alert("jQuery is working fine");
});
});

document.observe("dom:loaded", function(){
$("b2").observe("click", function(event){
alert("Prototype is working fine");
});
});
</script>
</head> 

<body style = "text-align: center;"> 
<h4> It is an example of using the jQuery noConflict() method. </h4>
	<p> Click the following buttons to see the effect. </p>
	<button id = "b1"> Run jQuery </button> 
	<button id = "b2"> Run Prototype </button>
</body> 

</html> 

Test it Now

Output:

After the execution of the above code, the output will be -

After clicking the given Run jQuery button, the output will be -

After clicking the given Run Prototype button, the output will be -

Suppose we have a piece of jQuery code in which we used $ shortcut, and we don't want to modify the code, or we like to use the $ because it is easy to use so we can use the approach given in the next example.

Example2

Here, we are simply passing the $ sign as the argument of the $(document).ready() function. This allows us to access jQuery using $ within the function. But outside the function, we have to use the full name jQuery.

The output is the same as the above example.

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$("#b1").click(function(){
alert("jQuery is working fine");
});
});

document.observe("dom:loaded", function(){
$("b2").observe("click", function(event){
alert("Prototype is working fine");
});
});
</script>
</head>

<body style = "text-align: center;">
<h4> It is an example of using the jQuery noConflict() method. </h4>
<p> Click the following buttons to see the effect. </p>
<button id = "b1"> Run jQuery </button>
<button id = "b2"> Run Prototype </button>
</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -