Can jQuery and Mootools work together?

Question

Can jQuery and Mootools work together??

If not when is that case?

Answer 1

jQuery can be used in no-conflict mode:

jQuery.noConflict();

or could use jQuery instead of $.

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

As well in MooTools there's a document.id() method that could be used instead of $:

document.id('myelement');

In case you want to be able to use a $ you can try the snippet below:

(function($) {

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


})(jQuery);

By the same way you can use $ from MooTools

Answer 2

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

Answer 3

There's more to it than just noConflict.

jQuery is an intrusive library. It adds an internal jQuery123 (for some randomised per-instance value of 123) property to every element it touches (which is anything with data or event handlers, amongst other reasons). In IE, this property also gets reflected as an attribute.

So if MooTools or any other library (or indeed, a plain DOM method) comes along and starts messing with those properties/attributes, or cloning elements, or hacking innerHTML, they're likely to mess up these supposedly-unique identifiers, causing jQuery to get confused and start misbehaving in ways it is extraordinarily difficult to debug.

jQuery also fiddles a bunch of event code to try to make submit/focus/blur/focusin/focusout/mouseenter/mouseleave events work and bubble across browsers. This may confuse other-library code that is not expecting it.

So, with jQuery 1.4, you can just about get away with using another library at the same time, as long as they are working on separate elements that don't interact with each other. (jQuery 1.3 was also much more promiscuous about what elements it ‘touched’.)

But in general I would not recommend two major frameworks on one page.

Answer 4

Yes, of course you can, in compatibility mode. But you have to be careful with the jQuery complements, because it can cause some headaches, as they are not being programmed in compatibility mode and can cause clashes with other libraries complements. To fix this you just have to change $ per jQuery in the complements

hope this helps.

Answer 5

Simply use jQuery.noConflict to assign jQuery to something else than $:

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

$ now refers to whatever you set it to before you initiated jQuery. jQuery is accessible through the jQueryobject.