Conflict between Mootools and jQuery causes script(s) to stop working

Bob StoneIT Guru
Both jQuery and Mootools offer some nice, easy to use scripts. Mootools is best known for their interactive slideshows and jQuery for their menus, but both have many other uses as well.  

jQuery is basically a toolkit with many DOM-related features while Mootools is more modular. They conflict because they have a few identically named functions and namespaces and as a result one or both scripts don't work, or at least don't work properly. In my experience it usually it is Mootools that loses out in this deal.

There are several workarounds available to make jQuery and Mootools work together. Some call for editing the core scripting of jQuery and others call for modifying your script, mostly just to avoid conflict with the "$" function that both rely on heavily. I tried several of these in the past, none worked that well and most just plain broke the script entirely. Maybe it was my fault for not implementing the changes properly, I dunno. I would post those here but it may confuse some who, like me, sometimes just skim pages looking for code snippets to fix what they already have.

After trying the hard way numerous times I found a very simple addition to jQuery scripts that makes it free up constants and variables so that other modules, like Mootools, can use them. In the simplest of terms you tell jQuery to not conflict.

Just add the following little line to the very top of your Jquery script(s), right after the script tag.
<script type="text/javascript" language="javascript">
                      // your script here

Open in new window

This method will usually make Jquery and Mootools play nice together with the least amount of headache. It has worked for me many times.
Bob StoneIT Guru

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.