What do other people think of using “custom” attributes to make things easier (in jQuery)

Question

I am currently jQuerifying (if there is such a word) my website. I am not good at JavaScript at all, and not great on jQuery. Object orientation is way passed me in JS, but the rest of my site is object oriented VB.net. I noticed, from some experience I had of jQuery a while back, just how difficult it can be when loading pages for a particular row - you have to somehow find out what ID, for example, to submit and stuff like that.

Just recently I tried using something like:

<li class="catalogueItem"><a pName='" & Product.Name & "' pID='" & Product.ID & "'>" & Product.Name & "</a></li>

Ok so this isnt quite the same - I was adding something like this as a literal control, but I dont have the code on screen at the moment so I just wrote something like it.

Anyway I then tried the following:

$("li.catalogueItem").click(function() {
    $(this).html($(this).find("a").attr("pID"));
});

This should work fine, based on my findings. So my questions are as follows: a) is there a problem with using this technique? b) what do other people think of this technique? c) is it ok to use this technique, in other peoples opinions, despite the fact that the HTML wont comply with W3C etc? d) can anyone point me in the direction of a more efficient or easier, or perhaps even more difficult / complicated but widely accepted, way to do this kind of thing?

Please bear in mind that a product may have many attributes and I may use it on the admin front end to rearrange products through a drag and drop interface.

Many thanks in advance.

Regards,

Richard

Rather long note to Rubens...

I dont know whether you have ever done any VB.Net before but I cannot find a way to create a server side script tag and then say something like:

ScriptTag.Controls.add(New LiteralControl("$('#" & MyDiv.clientID.toString & "').data('ProductName', '" & Product.Name & "');"))

I have tried and tried and tried but the only ways I can find are to store the scripts at serverside (maybe in an array) and then override the page render event (by which time all the scripts will have been added to the array) to output these in one script tag or, slightly more horrific, make the head tag run at the server and then add a script tag everytime I need to output another piece of script. Either way implementing these techniques would result in either taking a very long time to implement such a method or a ghastly long head tag with many script tags.

I for one believe developers should keep to the guidelines wherever possible - so I keep script tags in the head where they belong.

The way I suggested can be done "on the fly" - and the scripts will be loaded whether or not they are needed (they are specified in the head tag in the masterpage).

The way I see it the way I suggested has a lot more advantages as it is a lot easier to code (in my experience) and can be coded quicker.

One thing which did just occur to me... there is something called a ScriptManager which I have seen in Visual Studio... I wonder if that has anything to do with keeping scripts in one place... maybe its time to do some investigating... Will post back here if I think of anything else, or learn anything else about either method (pros and cons and alike).

Richard

Answer 1

If you're going to use custom attributes, I'd say use data- attributes, like this:

<li class="catalogueItem"><a data-pName='" & Product.Name & "' data-pID='" & Product.ID & "'>" & Product.Name & "</a></li>

In HTML5 data- prefixed attributes are for exactly this purpose...but won't cause any issues on an HTML4 document (though they are technically invalid). For now you access them like this:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").attr("data-pID"));
});

In the upcoming jQuery 1.5, .data() will look for them as a fallback as well, like this:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").data("pID"));
});

Answer 2

All modern browsers will not complain about this use of invalid HTML. That said, it still always bothers me. It's very common to see the use of the rel attribute to store data in the HTML. I also often tack on the id of something to the id attribute: <a id="product-384">My Product</a>

Once you're in the realm of JavaScript/jQuery, it's best to use jQuery's data() method. See http://docs.jquery.com/Data

Answer 3

As Cory Gagliardi wrote it's better to use jQuery.data (http://docs.jquery.com/Data) to store and read data in any HTML node.

Using jQuery.data method will add you some extra code (see work). The main idea is that you can store JavaScript Object in a HTML using a key.

Example:

$('li.catalogueItem item-0').data('item', {id:0, name:'My Item', desc:'...'});

For your actual .NET code you will be pushed to write this previous example for each item. Using a loop will do the job.

Answer 4

As Nick explains, it's and upcoming feature of jQuery and you should stick with that, since it'll be valid HTML5 code as well.

But i understand your are asking for personal experience, rather than technical justification.

So in my experience, use them as much as you need them.

HTML has been broken since the first day, it's missing a lot o useful features, but the good news are that you can workaround most of them without breaking functionality.

I have this rule, if you are building and application, not a public site (will be used by a wide and unknown audience), and you can have a controlled environment (read you can tell the app user what browser they should use), do whatever you have to do to make your app better, and that is better for the customer and better for you to develop/maintain/update.

Specs always change, and they always introduce features already in use ;)