JQuery conflict when using different javascript libraries

Today, I came to a scenario where I need to use JQuery and Prototype libraries in my application. Both are operating with $() to access the objects and do the client side logic. But, the $() is getting conflicted between JQuery and Prototype libraries and things got messed up. So, it should be a good practice to distinguish them because who knows what requirements come in future and how many client side javascript technologies we are going to use. The code which we have shouldn't effect anything, right?.

The same thing happen in my SharePoint sites too. When I tried to migrate from SharePoint 2007 to SharePoint 2010, the client side script [JQuery] custom developed is not working. The only reason behind is the conflicts in the javascript. The file SP.js in the SharePoint 2010 causing the problem.

So, make sure, if you have used JQuery in your applications, always the best practice is declare the Jquery global instance variable and then start using that instead of directly use the $(). For example,

var $j = jQuery.noConflict();
     
     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j(".someclass").hide();
     }); 

So, in the above code, we actually referring the $j() instead of directly $(), so it won't give any problems in future. No matter what how many different client side javascript technologies used, that should work. For more information check it here.

Hope you like this post and love to hear comments.