HTML5 Data attributes in HTML and jQuery

When writing javascript, it is often necessary to include metadata in the HTML markup, to help define some element or behaviour. There are common options available. You can use hidden inputs and/or standard attributes like class or title to store this metadata. However with HTML5’s data attribute, storing and parsing this data has become a whole lot easier and cleaner.

The syntax is straightforward. Any attribute prefixed with data- will be treated as data storage.

<div class="test" data-foo="bar"></div>

jQuery accesses this data like so…

var data = $( 'div.test' ).data( 'foo' ); // returns bar

Support for the data attribute has been added since jQuery version 1.4.3. jQuery’s implementation is smart enough that it can parse the attribute easily and even determine the correct data type used.

What I have found really useful is the fact that the jQuery can parse JSON syntax and return a JSON object. This makes passing data in PHP trivial, using the json_encode method. We also need to use htmlspecialchars method to escape or convert any quotes in the JSON string.

<?php  
$test = array( 'row' => 1, 'col' => 6, 'color' => 'pink' ); //create array of data you want to pass to jquery
$test = json_encode( $test ); //convert array to a JSON string
$test = htmlspecialchars( $test, ENT_QUOTES ); //convert any quotes into HTML entities so JSON string behaves as a proper HTML attribute.
?>
<div class="test" data-complex="<?php echo $test ; ?>"></div>

The jQuery parses the JSON string like so…

var test = $( 'div.test' ).data( 'complex' ); // returns JSON Object

console.log( test.color ); // outputs pink!

Important to note that this method is also backward compatible with older browsers, so there is no excuse not to give it a go!

2 thoughts on “HTML5 Data attributes in HTML and jQuery

  1. Hi, I’ve tested your code and it doesn’t work for me.

    The javascript variable test, only contains “{“. When jQuery try to parse, it stops right after the first double-quote.

    Do you have any idea about how to fix this?

    1. Hi Philippe, you are correct. I forgot to mention that the JSON string needs to be escaped for it to behave properly. I have updated the code now. Thanks for pointing this out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s