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"));
});