bassistance.de

A common problem when developing web applications is to provide some data from your server-side to client-side scripts. Consider a client-side form validation: You don’t want to generate tons of inline scripts and you don’t want to dynamically generate your javascript files. So you need a way to provide and read metadata from the HTML markup. And of course as unobtrusive as possible.

After a longer discussion about this matter on the jQuery mailing list, John Resig developed the initial version of the metadata plugin. Afterwards, Yehuda Katz wrote the first documentation and I improved both some more and wrote some tests.

Metadata plugin source (requires jQuery 1.0.4+, contains detailed documentation)
Metdata Testsuite
Documentation on Visual jQuery (Plugins/Metadata), though a bit outdated

The default usage is to put javascript objects inside the class attribute of your elements. Once the metadata plugin is loaded and you access an element, the plugin reads the data and provides it as a property on the element.

I’m using the plugin for the yet-to-be-released version of my validation plugin. You define an input that requires an email address to be entered with this code:

<input id="email" name="email" class="{email:true}" />

The validation plugin searches for all input elements inside the form that it validates and reads the metadata via the data() method:

data = $(element).data();

I highly recommend using the class attribute for metadata. As long as you put the data inside {}-brackets and avoid any spaces, you won’t produce any problems with stylesheets. And according to the HTML specification, the purpose of the class attribute is for both CSS classes and other data.