jQuery conflict is a common problem with many web pages, due to different versions of library using in a same page or conflict with other libraries like mootools.

The Joomla CMS is using  mootools as default java script library so in Joomla you cannot use $ for jQuery so simply use a noConflict(). to solve this kind of issue and the you can use jQuery instead of $.

jQuery.noConflict();

Another jQuery Conflict situation is something really complicated and hard to find out . Its due to different versions of jQuery library in a single page. In these days its happen in many websites mainly large platforms have many features some are working with older version , some with latest version. In these situations  many issues will comes like an example latest version of jQuery is depreciated the live() . So some older plugin may use this function in your page and latest files you included on the page for other plugins , then it case a jQuery conflict.

Ok now you got basic idea about jQuery conflict occurring situations. lets check how we can solve this type of jQuery conflict , check the below codes.

<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">var myjQ = jQuery.noConflict();</script>
//usage  myjQ("#some_id").html() you can use 1.10.1 required function with myjQ variable.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">var myjQ1 = jQuery.noConflict();</script>
//usage  myjQ1("#some_id").html() you can use 1.9.1 required function with myjQ1 variable.
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">var myjQ2 = jQuery.noConflict();</script>
//usage  myjQ2("#some_id").html() you can use 1.8.3 required function with myjQ2 variable.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">var myjQ3 = jQuery.noConflict();</script>
//usage  myjQ3("#some_id").live() you can use 1.7.2 required function with myjQ3 variable.
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
//usage  jQuery("#some_id").attr('alt') you can use 1.6.4 required function with jQuery variable. bcoz its last jquery file.

This is the way you can avoid the jQuery conflict due to multiple version of jQuery. ok lets check how to check all these variables works like what we expected. the following code returns the current jQuery version of the library.

$.fn.jquery; //for default version check

Just run the above code on your browser console (fire bug or any debug tool) with your different version variables.

console.log(myjQ.fn.jquery); // should return 1.10.1
console.log(myjQ1.fn.jquery); // should return 1.9.1
console.log(myjQ2.fn.jquery); // should return 1.8.3
console.log(myjQ3.fn.jquery); // should return 1.7.2
console.log(jQuery.fn.jquery); // should return 1.6.4

Hope this article will help you to solve your jQuery conflict due to any reason.

Thanks for reading enjoy the tricks. 🙂 🙂 🙂