mootools: $ not defined

Question

I've strange error i don't understand. I'm just moving my code from jQuery over to Mootools because it's much cleaner than the jQuery mess.

Now when i use the

$$('div.canvas')

in mootools i get the correct element.

When i try

$(document).getElement('div.canvas')

it tells me that $ is not defined. How can $$ and all helper functions like $lambda etc. be defined but not $?

Has something changed there from 1.1 to 1.2 and the docs are not updated yet?

Answer 1

Have you removed all reference to jQuery in your htmls?

Answer 2

If you are using both libraries on the same page you must use JQuery's noConflict() function

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

If you are still having trouble, try checking through your included JQuery files to ensure that any plugins/code use jQuery('div.canvas') etc instead of $ as $ has been released by the noConflict() function and will not run JQuery code.

Answer 3

MooTools will not override the $ function if it exists already. It checks for nullness of $ before defining it. So I suspect the $ is still lurking somewhere.

if (window.$ == null) Window.implement({
    $: function(el, nc){
        return document.id(el, nc, this.document);
    }
});

After including jQuery and running $.noConflict(); but before including MooTools, can you log the contents of $ and see what is logged?

include jquery
$.noConflict();
console.log($); // should return undefined
include mootools

Answer 4

as someone pointed out, when $ is defined, mootools 1.2.3+ will not take it over, it will revert to using document.id instead. this did not used to happen before that release so it largely depends on the version you are referencing. but it's certainly changed since 1.11 and it IS documented, read the announcement here http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

to your application design this means that, if your structure is...

load jquery (no need for noconflict, does not matter)
load mootools

... it can work as follows:

$("#foo"); // jquery
document.id("foo"); // mootools

// or create a temporary scope for mootools things
(function($) {
    $("foo"); // mootools
})(document.id);

best / recent practices in mootools development require plugins and code released to reference document.id or be within such a closure to ensure compatibility. this is actually ok as unlike in jquery where $ aliases the jQuery singleton, in mootools $ is just a selector so its use will be far less spread. Hence typing document.id("selector") is not going to be that much of a drag.