Feb 06

The MooTools JavaScript framework has a lot of nice methods, where store and retrieve are only two of them. The concept is a pretty simple one. I call it the „registry“. Every element may have properties which are also present in the DOM, like href, title and so on. But with MooTools, you have one more option to assign properties to elements which will NOT have a „physical“ representation in the DOM. For being able to identify one specific element in the DOM, a unique identifier is mandatory. As there is no such thing for every HTML element by default, they had to create one.

Technically, there is the id property, but not every element has to have it, so that is not the solution. Within the framework, there is a $uid method, which assigns an integer value to every element once MooTools is initialized (also for elements which are created dynamically later on). There is also a global counter value which increases the integer value and holds this „auto increment“ value. This is Native.UID.

So after that magic method has been called for every HTML element, each one has a „uid“ which can be obtained by myElement.uid. Sounds pretty easy and logic, right? Well, it is – except for forms. Guess what happens if an HTML form contains an input element with the name „uid“ and we want to store something at the form. You’re right: it crashes! Here’s why: The browser simply returns an input element instead of the integer value. Now imagine you have several forms of that kind and you want to submit them with the Form.Request class. It uses the occlusion pattern of the MooTools framework. Now as soon as one form has been sent that way, all the other forms will simply check if there is a request stored for input instead of their integer uid value. Thus: all the forms share the same request object and your application will crash!

Check out the exmaple page.