Tuesday, February 16, 2010

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.

15 comments:

  1. Thank you so much.

    I have faced this problem...and lost a day to fix it.

    And I found your topics, and everything is ok now

    ReplyDelete
  2. good solution, its working now...
    thanks

    ReplyDelete
  3. I have lightbox2 and another jquery plugin runngin. When i used your method the lightbox2 stop working correctly. Any ideas?

    ReplyDelete
  4. Thank Yo So much.. Its working in great way.

    ReplyDelete
  5. Brilliant! Worked for me, thanks.

    ReplyDelete
  6. Ah! Excellent solution.!
    I still hate javascript, though...

    ReplyDelete
  7. i tried this several times - thanks to you i have done what i thought was impossible.. you rock!

    ReplyDelete
  8. Sorted my problem. Thanks!

    ReplyDelete
  9. Excelent !!! 2 mim and my problem was solved !

    ReplyDelete
  10. Excelent !!! 2 mim and my problem was solved !

    ReplyDelete
  11. Thank you for your great help !!!!!!!!!!!!!!!!!!

    ReplyDelete
  12. This works great! Thank you!!

    ReplyDelete
  13. Great Working.......
    Thank you so much.......

    ReplyDelete