Resolve jQuery and MooTools Conflict

jQuery and MooTools are great JavaScript libraries for introducing dynamic interactions to your web site or application. They both include capabilities for manipulating CSS and adding various effects and animations as well as pre-built Ajax functions. However, if you need to use both on the same page, then you’ll immediately have a conflict since they both use the same namespace by default. To avoid the conflict, jQuery includes the ability to modify its namespace using jQuery.noConflict(). If you call this method after loading the jQuery library, then all references to jQuery should use “jQuery” instead of “$.” This will allow MooTools to function using $. The particular issue I had was a conflict between jQuery, Thickbox and MooTools. Correcting this conflict required the additional step of changing all references to $ in the Thickbox library to “jQuery.” Thickbox includes some uses of $ that shouldn’t be replaced, so don’t perform a global find and replace.

Leave a Comment