Conflict in multiple jQuery files on same page

You may also like to see:

• Best resources to learn JavaScript

• jQuery library loaded or not validation

Many libraries use $ character as library main instance variable or function like jQuery. jQuery has created a shorter variable name $ so you can use it quicker instead of using jQuery. In other words using jQuery keyword or $ is same. Problem occurs when using multiple libraries using $ as there variable. For example you are using mootools and jQuery on the same page. Now if you try to use $ to call a function, it will throw an exception as there are two different libraries using this keyword as variable causing conflict.

jQuery allows you to free $ keyword using noConflict() method. So if you called this function now $ is no more associated to jQuery so you can use it for other library like mootools and to use jQuery code, you need to use jQuery keyword. Calling noConflict() with $ or jQuery only releases $ keyword. so jQuery.noConflict() and $.noConflict() are same.

Now if you have already written, code with $ keyword for jQuery or you still want to use $ keyword for jQuery library too, you can do a trick. You can pass $ as alias for jQuery in ready block. It is recommended that to use jQuery code always using this technique as in sometime later in application you may need you use any other library which cause conflict.

or you can initilaize anonymous function passing it object of jQuery as parameter and receive this parameter as $ keyword and use jQuery code with $ within that anonymous function scope.

jQuery.noConflict();
(function( $ ) { //receive parameter as $ alias

 //Now you can use $ for accessing jQuery from here
 $(function() {

   // Use jQuery code with $ keyword
   $( "div p" ).show();
 });

})(jQuery);// call anonymous function and pass jQuery instance variable

// Other code using $ as an alias to the other library
$( "content" ).style.display = "none";

Insead of $ you can also use any other character or word as jQuery instance variable by assigning it using noConflict() function.

var jq = jQuery.noConflict();

//Now you can access jQuery code using jq keyword
jq( "div p" ).show();

What if you are a using multiple jQuery version on same page? jQuery and $ keywords associated with which version?

Lets assume you are using a plugin with a jQuery version and at some time later jQuery updated its version which is required for another plugins. Both plugins of jQuery required different versions of jQuery because they do not support other versions.

So what now you have to do?

Here you may need to free jQuery keyword also because now jQuery keyword will also conflict so you need to free jQuery keyword. You can achieve this by passing true as parameter to noConflict() this will free both keyword from current libraries. You must need to initialize new instance variable for further use.

So now if you need to use multiple version of jQuery for different plugins, you may initialize different variable associated with different version of jQuery by passing true parameter to noConflict()

//you must load second library later after initializing
//first instance of version and freeup jQuery keyword
//else jQuery keyword will
//cause conflict it you uplaoded both files.





//so now here $ and jQuery both cannot be used

//using $jQuery1_10 will call version 1.10.0 library code
$jQuery1_10( "div p" ).show();

//using $jQuery1_9 will call version 1.9.0 library code
$jQuery1_9( "div p" ).show();

Here is Demo

If you want to add something to this post please comment below.

You may also like to see:

• Best resources to learn JavaScript

• jQuery library loaded or not validation