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

Solution 1:

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"); // jquerydocument.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.

Solution 2:

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

<scripttype="text/javascript"src="other_lib.js"></script><scripttype="text/javascript"src="jquery.js"></script><scripttype="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.

Solution 3:

Have you removed all reference to jQuery in your htmls?

Solution 4:

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){
        returndocument.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