<

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

Published on
9,541 Points
3,541 Views
Last Modified:
Approved
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">
jQuery.noConflict();

// your script here

</script>

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.
0
Comment
Author:Bob Stone
0 Comments

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month