Most of the time, when you are using Ajax, you need to do some interaction between the javascript and html. For example, you have a list of entries in a table, each row of a table represents some information(buy, sell volume, last done price etc) relating to a stock. When user click on a row, you want to trigger an Ajax request to retrieve some more information about this stock and displayed as a pop up. So the question now is how do you know what is the stock code on the row that the user has clicked? There are a few options for you to do so:

1. Put the data in the id attribute.

Whenever the link or a tag is clicked, you retrieve the id of the tag, and send the id along with the Ajax request. This is easier to achieve, however, sometimes you only wants to use a fix id for the tag, which is easier for you to retrieve the element later by directly passing the id to the jQuery selector. Then you have a problem, and the best practice is to try best to avoid using duplicate id for different tags. If the data you want to save is the same for some tags, then probably, this is not the best solutions as well.

2. Put the data in the arbitrary attribute

When I say arbitrary attribute, it means that you can define your own attribute and put it in the html tag. e.g.

Straight Times Index

The code here in the a tag is an arbitrary attribute. With this, you can put any kind of data in any tag. On the other hand, it makes the data meaningful as well. Then, using javascript readAttribute method, you can easily retrieve the data. However, there are some problems with this as well. The problem is that this breaks the HTML standard, most of browsers will simply ignores this arbitrary attribute if it is not defined as a standard attribute for the tag. If you use firefox to validate the html page according to W3C, you will fail in the validation.

One thing to note is that, in HTML5, it is valid to put your custom attributes but must be prefixed with data-.e.g

click me

But this may only be viable when HTML5 becomes a universal standard.

3. Put the data in class attribute

This method may not seems elegant to some purists, however, it is universally supported and standard compliant. You can define you own syntax rules in the class name attribute.e.g.

In the above example, I define the rule as data-your_data. The class names should start with data, anything that follows in this class name is the data. Then you can easily use javascript to read the class name and extract the data out. However, if you are using Jquery, the plugin metadata maybe your choice. This plugin allows you to define some data in json format in the html tag.

  • ...
  • With the above html, you can simply do the following:

    var data = $('li.someclass').metadata();
    if ( data.some && data.some == 'data' )
        alert('It Worked!');
    4. Put your data in another tag

    You may want to wrap the html tag with a tag which contains the data, but with style “display:none”. e.g.

    {"id" : 1, "name" : "shanison"}click me

    However, I personally don’t like this solutions. It makes the html contents messy.

    Leave a Reply

    Your email address will not be published. Required fields are marked *