Search code examples
javascriptmootools

mootools: $ not defined


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?


Solution

  • 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.