MooTools, Framework Compatibility, and Dollar $afe Mode

By  on  

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.

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. Isn’t this line:

    this.MyClass = new Class({

    Supposed to be:

    var MyClass = new Class({

    ?

  2. Amitay Horwitz: Nope. The “this.” gives the plugin window scope within the closure.

  3. thnx for the info/update. looking forward in seeing more tips/tricks with the upcoming mootools version!

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

  5. i have “document.id is not a function” error with TinyMCE’s scripts too… but not in IE…

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

  7. 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! :)

  8. Lode

    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?

  9. Lode: I would imagine you could change replace every occurrence of “document.id” within TinyBox with something like “document.tid”.

  10. Lode

    @David Walsh: The weird thing is, “document.id” doesn’t occur within TinyBox.

    Demo: http://www.lodemoutton.be/mootools-tinybox-error/ (source-files included)

  11. Lasse

    @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

  12. Lasse

    @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

  13. Jay

    Thank you, this info just saved my hiney on a project I was working on. Keep up the great work!

  14. brook

    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?

  15. brook

    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?

  16. martin

    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!

  17. @martin: Unfortunately document.search hasn’t been implemented yet. *sigh*. You can just use (document.id,$$); instead.

  18. 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…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!