How to Avoid Conflict by using jQuery noConflict in JS Libraries

Why use $.Conflict method in jQuery

In your web projects, you may be using different JS libraries for different tasks including jQuery.

Different libraries use an alias for calling its methods or for some other syntax.

The default alias or shortcut used in jQuery is “$” sign. For example:

$(document).ready(function(){

$('button').click(function(){

And so on. The “$” is basically an alias of the word “jQuery”.

While using only the jQuery library, there should not be any issue while using “$” as an alias. However, if other JS libraries in your project are also using the “$” alias then there may be conflict in code and some unexpected things may happen.

To avoid this kind of situation, you can use jQuery $.noConflict method to suppress “$” sign and rather using some other sign or keyword to call jQuery methods or selectors etc.

You should use no conflict method as the first line in jQuery code, for example:

var a_keyword = $.noConflict();

$(document).ready(function(){ // If required

// Code here

See the following examples, where I will use difference word as an alias by using the noConflict jQuery method.

An example of using “jQuery” rather than “$”

In this example, an animation is created by using the animate method of jQuery. The first line of code is:

$.noConflict();

 

After that, the “jQuery” is used rather “$” sign with the methods: button click and animate. As you click the button, the animation will run.

jQuery noConflict

The code:

<!doctype html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>  
<script>
   $.noConflict();
   jQuery(document).ready(function() {
    
jQuery( ".btncls" ).click(function() {
  jQuery( "#divanimation" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "easeInOutSine",
      height: "easeInOutSine",
    },
    complete: function() {
      alert( "Animation complete!" );
    }
});
});

});

</script>
  <style>
#divanimation {
    padding: 8px;
    background:#B80C4D;
    width: 200px;
    height:200px;
    box-shadow: 0 0 5px #aaa;
    font-size: 18px;
    text-align:center;
    border-radius: 200px;

}
.btncls{
    background-color:#2D3942;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;
    
    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
  </style>
</head>
<body>

<p><button class="btncls">Run animation with "jQuery" alias</button></p>
<div id="divanimation">animation example</div>


</body>
</html>

You can see in the code section, the “$” sign is not used. Instead “jQuery” is used:

<script>

$.noConflict();

jQuery(document).ready(function() {



jQuery( ".btncls" ).click(function() {

jQuery( "#divanimation" ).animate({

width: "toggle",

height: "toggle"

}, {

duration: 5000,

specialEasing: {

width: "easeInOutSine",

height: "easeInOutSine",

},

complete: function() {

alert( "Animation complete!" );

}

});

});



});



</script>

As mentioned earlier, the “$” is an alias of the shortcut of “jQuery”. In the above example, if you do not use the noConflict method, it will still work.

A demo of using a custom word as an alias

As mentioned earlier, you may use a custom word related to your project or website/company name as an alias by using the jQuery $.noConflict  method.

In this example, I am using “jdemo” as an alias. At the click event of the button, the addClass method of jQuery executes and adds a CSS class to the div element. See the demo online:

jQuery noConflict addClass

Complete code:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
var jdemo = $.noConflict();
jdemo(document).ready(function(){
  jdemo(".btncls").click(function(){
    jdemo("#divcls").addClass("addcls");
  });
});
</script>
<style>

.addcls
{
  background: #408080;
  width:220px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
.btncls{
    background-color:#2D3942;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #fff;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;
    
    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
}  

</style>
</head>
<body>

<div id="divcls">Click the button to add a CSS class in div by using "jdemo" alias</div>
<p>
<button class="btncls">Add Class to div by "jdemo"</button>
</p>
</body>
</html>

By simply declaring a variable, the noConflict method is assigned to that variable. The variable name acts as an alias in the rest of program.

An example of using $.noConflict with $.each method in the HTML menu

In this demo, a menu is created by using the <div>, <ul>, <li> and <a> tags with some CSS. As you click the button, the each method of jQuery is executed by using an alias: “jqeach”. The alias is used in other methods as well instead of “$” sign.

The jQuery each method will trigger an alert showing the text of each menu item.

jQuery noConflict menu

This is how the “jqeach” is used in jQuery code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script>
var jqeach = $.noConflict();
jqeach(document).ready(function(){
jqeach(".btncls").click(function(){

    jqeach("li").each(function(){
        alert(jqeach(this).text());
    jqeach('div > ul > li > a').css("background-color","red");
});
});
});
</script>


<style>
.men_ex{
    border-radius:5px;
}
.men_ex ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
    
}

.men_ex ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #DA8119;
    display:block;
    border-bottom:solid 1px #000;
}
 
.men_ex ul li a:visited {
    color: white;
}
 
.men_ex ul li a:hover, .men_ex ul li .current {
    color: #000;
    background-color: #FBE9AC;
}

.show_hide{
   position:fixed;
   margin: 30px 30px;
}
.btncls{
    background-color:#408080;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #fff;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;
    
    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
}
</style>
</head>

<body>
<div class="men_ex">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<p><button class="btncls">Execute jQuery each by an alias "jqeach"</button></p>

</body>
</html>

A precautionary note

As using the noConflict method in your program to replace ‘$” with “jQuery” or a custom alias, be careful if you are using third-party plug-ins or other jQuery code that still used the “$”. Generally, it should not cause any problems due to scope; however, sometimes you may see unexpected results.