Thursday, January 28, 2010

JQuery Conflict with Mootool and other libraries !!! Use JQuery.noConflict()

           We all may have use JQuery in our application to build rich UI. While working with JQuery today I found that JQuery is not working on some pages where I have user mootool scripts. I search on net and found a very descriptive solution at JQuery site.

           According to this article the reason for JQuery conflict is the use of $ function. mootool and prototype.js files have their own $ function. So when we use $() and try to access JQuery (as it is shorten form of jQuery()) browser is not able to resolve which $() function it has to use. To avoid JQuery conflict we have to use jQuery.noConflict() function.

           While you read JQuery site article you may have observe the order of java script files added to web page.  Read carefully and you find that you have to add other libraries first and then add JQuery library to page. If you change the order and add the JQuery library first, either mootool(or other library which you have included) or JQuery will not work. 

Happy Programming !!!