Use jQuery.noConflict() Method to Avoid Conflicts Between JS Libraries

The majority of JavaScript libraries apply $ symbol for variable names and methods. jQuery is not an exception. Therefore, as multiple frameworks use $ and their application is different, it is recommended to apply the jQuery.noConflict() method to make sure there are no conflicts between JavaScript libraries.

By applying the jQuery.noConflict() method, you will create a no-conflict setting, in which different libraries can work in harmony. If you want to replace the $ symbol with another keyword or sign, there is also an option to create a new alias for jQuery.

jQuery noConflict: Main Tips

• While the jQuery library uses the $ symbol as a shortcut, other frameworks might potentially use it as well.
• The jQuery.noConflict() method makes it so the $ symbol does not represent jQuery anymore.

Method Explained

The $ symbol is used as a shortcut for jQuery to make writing the code more convenient. However, there are other JavaScript frameworks which can utilize this symbol differently. If such a clash occurs, some symbols might stop functioning.

To avoid unnecessary malfunctions, the jQuery no conflict method was introduced. After it is applied, $ shortcut does not belong to jQuery anymore. In other words, jQuery.noConflict() resolves potential conflicts with different frameworks that use this symbol differently than jQuery.

To achieve that, you should write jQuery instead of the shortcut. Take a look at the syntax that applies to this method:

jQuery.noConflict([removeAll])

removeAll is a boolean value (false by default) which is used for specifying whether all jQuery variables from the global scope should be removed or not.

Here is a simple example of using the jQuery.noConflict() method:

$.noConflict();
jQuery(document).ready(() => {
    jQuery("button").click(() => {
        jQuery("p").text("Hey jQuery is working!");
    });
});

In addition to this, it is also possible to create your own shortcut for jQuery:

var query = $.noConflict();
query(document).ready(function(){
    query("button").click(function(){
        query("p").text("Hey jQuery is working!");
    });
});

If you have a block of jQuery code which uses the $ shortcut and you do not want to change it all, you can pass the $ sign in as a parameter to the prepared method. This allows you to access jQuery using $ inside this function. However, outside of it, you will have to use the full name of jQuery:

$.noConflict();
jQuery(document).ready(($) => {
    $("button").click(() => {
        $("p").text("Hey jQuery is working!");
    });
});

jQuery noConflict: Summary

• jQuery introduced a function to make it possible to avoid clashes with other JavaScript libraries.
• The jQuery no conflict mode can be reached with the jQuery.noConflict() function. It means that $ symbol will no longer be a shortcut for jQuery.