MooTools and jQuery conflict - despite Dollar Safe Mode

Question

I'm trying to get some pre-existing MooTools code to function properly within a Drupal site. I know the MooTools code works on its own. Once I load the MooTools library in the page, jQuery stops functioning.

I am including MooTools after jQuery, which (according to the MooTools developers) should prevent Moo from stealing the already defined $ from the already loaded jQuery library.

I've converted all references of $ within my Moo code to document.id.

When I load the page, the Moo code works but the jQ code does not. It appears that Moo is still stealing the $ variable away from jQ and redefining it for itself. For testing purposes, the Moo code I'm loading is a simple 12 Accordion script. There are more complex ones I need to use if I get this problem resolved.

Drupal makes extensive use of jQuery, so using jQ's no_conflict mode is not a viable option. From what I understand, this should be possible given Dollar Safe Mode.

I'm using MooTools Core 1.2.4 and MooTools More 1.2.4.4 and jQuery 1.2.6 (also tried 1.4.2).

Answer 1

This depends more on plugins used in your case. jQuery itself might be working fine, but if plugin is not written by their recommendation, it will not work.

Answer 2

Instead of using $ to access the jQuery functions you can always use jQuery().

Answer 3

Odd, this is not something that should be happening, to be honest. Since mootools 1.2.3(?) (could have been 1.2.1), it will NOT take over the assignment of $ if it's already defined on the page. That is, if the order of loading is as described:

jquery mootools

...then moootools will automatically go into compatibility mode and revert to document.id. The only instance where this will not be true is if jquery is being loaded in noConflict mode, which would prevent it from assigning jQuery to $ and will give no reason for mootools not to grab it.

That's the theory, anyway. If you are seeing a different behaviour, then there is something wrong going on with the browser. Are you lazy-loading or non-blocking / parallel loading the scripts?

The best practice here usually is, leave jquery in native mode (w/o noConflict) and reassign $ to document.id to take care of mootools in a scope like so:

<div id="foo"></div>

and then:

$("#foo"); // jquery

(function($) {
    $("foo"); // mootools.
})(document.id);

There have been plenty of questions on the subject recently, just read through the latest mootools questions. failing that, please post a URL to your project.

Obviously, you can console.log($) to check / confirm this: http://www.jsfiddle.net/AxVqy/ -> testcase

Answer 4

why don't you use jQuery instead of $? if for any reason you can't do that the noConflict(); doesn't mean you have to stop using $ for jQuery you can do something like this:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ 
  });
  // Code that uses mootools $ 
</script>

you probably have problem using jQuery with plugins just replace their $(function(){} with jQuery(document).ready(function($) {});

notice that I loadeed mootools first, you can also do something like this around each section of code:

(function($) {
    $("id"); // mootools.
})(document.id);


(function($) {
    $("#id"); // jQuery.
})(jQuery);

I'm having a similar problem finding a solution to loading all or one or any combination of different libraries. Once I figure how to do that, I'm sure I can share it with you and you will definitely be able to do this. but the above solutions should work for you, I've already managed to use this to load jQuery and mootools together with any order I want.