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.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
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’am using the great TOP Watermark Tool from David.
I change the code as the suggestion here:
from : var go = $(‘gototop’);
to: var go = document.id(‘gototop’);
I dont get any error message, but the Top-watermark doesn’t appears to.
Whats wrong?
Somebody has any idea?
Thx in advance.
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 $ with document.id in 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.