How to Resolve JQuery Conflict Issue

Installing different versions of Mootools library and jQuery library can cause a lot of JavaScript conflicts. That’s not all, even under situations where you’re using the same libraries versions and the libraries have been created by different developers (for eg: jQuery and Mootools conflict), JavaScript conflict can also occur.

How to resolve JavaScript conflicts?

Although there’s no such universal technique of resolving JavaScript conflicts, it varies from case to case and are best resolved by the developers. But here are few steps that you can try:

Put jQuerry into no-conflict mode

The jQuery library and all of its plugins are contained within the jQuery namespace. Global objects are stored inside the jQuery namespace, by the way so you shouldn't get a clash between jQuery and any other library such as prototype.js, MooTools.

You need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in the page.

<!-- Another way to put jQuery into no-conflict mode. -->
<script src="/prototype.js" type="text/javascript"></script>
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});
 
// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
    var mainDiv = $( "main" );
}
</script>