CODEWITHSUNDEEP
javascriptjqueryajaxhtml
w.donahue
w.donahue

Reputation: 10906

Where to store element specific extra data in a web page; data- or javascript

I have some data that I need to associate with specific element such as an individual table row. This data contains information such as the current state, and a unique identifier that correlates to an SQL row. When the user interacts with the element I want to read out the unique identifier, and with that identifier, issue an AJAX request to let the user change the state of that element.

After researching, it seems that there are two camps as to how to embed this element specific information.

1) Using a data- attribute in the html5. My understanding is this will work in modern web browsers as well as older browsers that don't support html5. But while this works, it does not following the HMTL spec ( less than HTML5) and so it won't validate if you run it through a HTML syntax checker.

2) Store the additional data into a javascript array, object etc. The extra work with this is now you need a way to correlate the javascript data to the html element.

What are the pros and cons of using these two different approaches to storing the data? And what approach would you recommend?

Thanks!

Upvotes: 4

Views: 530

Answers (4)

pian0
pian0

Reputation: 847

You've tagged your question with jQuery, so I'll assume you have it. You can use the .data() method to store arbitrary data and associate it with an element.

$("tr").first().data('sqlId', 1234);
assert($("tr").first().data('sqlId') === 1234);

Upvotes: 1

James Sumners
James Sumners

Reputation: 14783

I wouldn't worry about the data- attributes not passing validators. The attribute is in HTML5 because people were using similar, non-standardized, attributes for a long time specifically to solve this problem. Go ahead and start writing "HTML5" by using the parts of the spec that work, i.e. don't break in a certain browser, and using the HTML5 doctype. The W3C validator at least already supports the doctype.

As for which method to use, I think it really boils down to when you want to parse the information in the JavaScript interpreter: on page load or when the data is needed. I imagine it depends on just how much information you have as to which will be most efficient. But you can't go wrong with adding it to the HTML with a data- attribute or two.

Personally, I like adding the information to the HTML with data- attributes. In the scenario you describe, I would use data-state and data-rid (or similar) so that I don't have to further parse the information (it sounds like you are thinking of putting two bits of information in one data- attribute). This way, your table of information is truly complete: the data is presented to the user and the markup contains further information that could be necessary to a parser.

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

In option (2), no special correlation is needed any more than in option (1)—rather, less. You can put the data into a property of the DOM object that corresponds to the element. Why not make use of the basic feature of JavaScript that you can add properties to an object?

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

I'd definitely go with option (1) and either not worry about those attributes not validating or just validate your document as html5. It's simple. It works.

The "separation of concerns" theory that leads some people to option (2) is nonsensical for this sort of situation because if you put the data into a JS object of some kind you still need a way to tie it back to the actual html elements so then not only are the two not really separate, they're more complicated than they need to be on the client side, and the server side code needed to produce it in the first place is more complicated.

Upvotes: 1

Related Questions