Using the HTML5 data attribute

14 July 2011

HTML5 contains a new attribute wich can be used to store raw data in an element. This raw data isn't visible for the viewers of the page, but can be used by a JavaScript application, for example.

An example. Suppose you want to add a state (published or draft) to a list of articles. Before HTML5 you would use an "invisible" attribute like rel="" or title="" to store this data.

<ul>
    <li rel="published">Article 1</li>
    <li rel="published">Article 2</li>
    <li rel="draft">Article 3</li>
</ul>

With this state you can loop trough this list and hide all articles with a draft status. But what if you also want to store an "online" state with a value of true or false? Find another attribute that can be (ab)used to store this value? The source code isn't getting any prettier and certain attributes (like title) shouldn't be used for this purpose because it will loose it's original function, wich is used by disabled, for example. And your HTML will not validate anymore.

In HTML5 yo can solve this by doing this:

<ul>
    <li data-online="true" data-state="published">Article 1</li>
    <li data-online="false" data-state="published">Article 2</li>
    <li data-online="false" data-state="draft">Article 3</li>
</ul>

Elements can be found and manipulated with jQuery easilly:

$("li[data-online='false']").hide();

This will hide all articles wich have the online state "false".

I recently made such a solution with classes, wich were prefixed. It's kind of dangerous (using a matching css declaration by accident) and it requires a lot of jQuery to match the right elements. I wanted to autmatically create input fields with autocomplete functionality. This function matches every input with a class "autocomplete" and looks for a class that is prefixed with "tbl_" to determine wich database to use, and "col_" to indicate the column to search.

<input class="autocomplete tbl_house col_street" type="text" name="street" />

Quite a nasty solution because you got "secret" database information in your HTML code and not very scalable (what if i want to search 2 columns?) but it did the trick.

var elements = $('.autocomplete');
 
  $( elements ).each(function() {
    var keyword, table, column;
    var classList = $(this).attr('class').split(/s+/);
    $.each(classList, function(i,className){
      if (className.substring(0,4) == 'tbl_') {
        table = className.substring(4);
      } else if (className.substring(0,4) == 'col_') {
        column = className.substring(4); 
      }
    });
    if (table != '' && column != '') {
      $(this).autocomplete({
        source: "autocomplete.cfm?tablename="+table+"&columnname="+column,
        minLength: 2
      });
    }
  });

A more elegant way is to do this in HTML5:

<input data-table="house" data-column="street" class="autocomplete" type="text" name="street" />

And the JavaScript for this function will look like this:

var elements = $('.autocomplete');
 
$( elements ).each(function() {
    $(this).autocomplete({
        source: "autocomplete.cfm?tablename="+$(this).attr('data-table')+"&columnname="+$(this).attr('data-column'),
        minLength: 2
      });
    }
}

This still displays your table name column name in the source code, but the JS is way more elegant and scalable.

Browser support for dataset


You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    sankar raman

    27 October 2015

    It's good.
    what I understood is : 1. every class invokes a jQuery. 2. every data-* attribute invokes a jQuery.