Can jQuery and Mootools work?

Question

Can jQuery and Mootools work together?

If not, when is this?

Answer 1

There is more than just noConflict .

jQuery is an intrusive library. It adds an internal jQuery123 value (for some randomized value for instance 123 ) for each element it touches (something like data or event handlers, among other reasons). In IE, this property is also reflected as an attribute.

So, if MooTools or any other library (or, indeed, a simple DOM method) comes in and starts messing with these properties / attributes or clone elements or hacking innerHTML , they are likely to spoil these supposedly unique identifiers, which is why jQuery gets confused and starts to behave erroneously as it is unusually difficult to debug.

jQuery also hid a bunch of event code to try and get the submit / focus / blur / focusin / focusout / mouseenter / mouseleave events to work and bubble up in browsers. This may confuse the code of another library that does not expect it.

So, with jQuery 1.4, you can just walk away using a different library at the same time if they work on separate elements that do not interact with each other. (jQuery 1.3 was also much more messy about what elements it touched.)

But overall, I would not recommend two main structures on one page.

Answer 2

jQuery can be used in conflict-free mode:

jQuery.noConflict();

or use jQuery instead of $ .

jQuery('#myelement').hide();

Also in MooTools there is a document.id() method, which can be used instead of $ :

document.id('myelement');

If you want to use $ , you can try the snippet below:

 (function($) { $('#myelement').click(function() { ... }); })(jQuery); 

In the same way you can use $ from MooTools

Answer 3

Use dollar safe mode in Mootools, and you should be fine as jQuery does not extend the natives.

Answer 4

Just use jQuery.noConflict to assign jQuery to something other than $ :

 <script> jQuery.noConflict(); </script> 

$ now refers to everything you installed before you started jQuery. jQuery is accessible through the jQuery object.

Answer 5

Yes, of course you can, in compatibility mode. But you have to be careful with jQuery add-ons because it can cause some headaches, as they are not programmed in compatibility mode and can cause collisions with other library add-ons. To fix this, you just need to change $ per jQuery in add-ons

hope this helps.