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
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

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!