MooTools, Framework Compatibility, and Dollar $afe Mode
MooTools 1.2.3 was released on June 19, 2009. With this release, MooTools implemented Dollar Safe Mode. Essentially, MooTools no longer requires the $ function for its own purposes. Valerio Proietti writes about Dollar Safe Mode on the MooTools blog but I'll give a quick overview below.
document.id() vs $
The $ function has become document.id(). The code looks as follows:
/* old:: var myElement = $('my-element'); */
var myElement = document.id('my-element');
If MooTools doesn't detect another framework requesting the $ function, $ will automatically be assigned to MooTools.
document.search() vs $$
The $$ function will also be renamed document.search(). The code looks as follows:
/* old:: var inputs = $$('input'); */
var input = document.search('input');
Like the $ function, $$ will be assigned to MooTools' document.search() if a $$ function is not detected. Note that document.search() was NOT implemented in MooTools 1.2.3; document.search() will be implemented in MooTools 2.
Strategies For Updating < 1.2.3 MooTools Code
There are a couple of ways to update your code. The first is to simply switch all $ references to document.id():
/* old:: var myElement = $('my-element'); */
var myElement = document.id('my-element');
The second method is to use closures so you can continue to use the $ and $$ functions:
(function($,$$) {
this.MyClass = new Class({
//functionality in here...
});
var myInstance = new MyClass($('search-box'),$$('input'))
})(document.id,document.search);
DO NOT FEAR! My MooTools Code Still Works!
Don't pass up my older code samples due to the move away from requiring $! The code will still work. Use one of the above strategies for making my code framework-compatible.
Isn’t this line:
this.MyClass = new Class({
Supposed to be:
var MyClass = new Class({
?
Amitay Horwitz: Nope. The “this.” gives the plugin window scope within the closure.
thnx for the info/update. looking forward in seeing more tips/tricks with the upcoming mootools version!
I’ve made the change to MooTools 1.2.3 since i discovered some interesting FX extensions but the new version seems to cause conflict with TinyMCE WYSIWYG editor. I’m getting the “document.id is not a function” error @ mootools core when loading TinyMCE’s scripts. I’m not using MTs along with another Frameworks so i don’t have a clue about what’s going on.
Hope this to be fixed quickly.
i have “document.id is not a function” error with TinyMCE’s scripts too… but not in IE…
i can confirm daetherius and dr. death,
even when i changed all my $() into document.id(), and did everything else the mootools blog told me to do, it didn’t really fix the problem. since i’m also using TinyMCE, i tried taking that off for a moment just in case it was the tinyMCE… and what do you know, it worked. i was checking my site on both FF and Chrome. but of course, i can’t sacrifice TinyMCE just that easily.
i’m rolling back to 1.2.2 until dr. death’s ticket in the lighthouse is seriously pondered upon.
Thanks David! Took over a project that already had jQuery code implemented on one of the pages, which I didn’t discover until after I had implemented/tested some functionality using MooTools (on other pages). But, the MooTools script wasn’t working with the jQuery. Long story short: changed $() to document.id() and it worked like a charm. Thanks! :)
I’m not having issues with TinyMCE and mootools, but with TinyBOX and mootools. TinyBox just won’t display any content when i fire it up in Internet Explorer… Firefox and safari work fine.
I replaced the
$withdocument.idin my mootools function (accordion), but no result.. Does anyone know how to fix this?Lode: I would imagine you could change replace every occurrence of “document.id” within TinyBox with something like “document.tid”.
@David Walsh: The weird thing is, “document.id” doesn’t occur within TinyBox.
Demo: http://www.lodemoutton.be/mootools-tinybox-error/ (source-files included)
@David Walsh: I am still having trouble converting this simple horizontal slider to work using mootools 1.2. – Do you have an idea, to make the calls work in 1.2. ?
Syntax working in mootools 1.1. : http://images.graebert.com/test/1.1/scroller.html
Syntax not working in mootools 1.2.: http://images.graebert.com/test/1.2/scroller.html
@Lasse:
I’ve fixed the code using knowledge out of here, just in case someone is interested in moving a horizontal scroller from 1.1 to 1.2:
http://blog.colorbird.com/mootools_doc/Plugins/Scroller.htm
Thank you, this info just saved my hiney on a project I was working on. Keep up the great work!
its seems that document.id is as described above but document.search doesn´t seem to exist and isn´t mentioned in the linked mootools article or on the mootools site.
am i missing something?
its seems that document.id is as described above but document.search doesn´t seem to exist and isn´t mentioned in the linked mootools article or on the mootools site.
am i missing something?
Hi!
Is there any chance to get document.search to work? I´m not able to use closures as you discribed with your great kwicks-plugin.
Thank you for great work!
@martin: Unfortunately document.search hasn’t been implemented yet. *sigh*. You can just use
(document.id,$$);instead.HI David,
Was there a specific reason why
document.search();wasn’t implemented or backported to the 1.4 branch? Seems like a big omission, given that document.id supplanted $, and has been the case for the last 3 years…