Question

I just want to get some thoughts on storing variables for JQuery’s use.

Example

Here JQuery would use the the value of the video_id hidden input, and then voteup the video by the video_id.

 <form class='voteup' action='' method='post'>
   <input type="hidden" name='video_id' value='<?php echo $video_id; ?>' />
   <input type='submit' value='Vote Up' />
 </form>

Note: This is just an example.

But what if I want a link to do the same thing. Where would I store the video_id?

Obviously, I could store the video_id in the class attribute, but I don’t think that this is the best way, especially if I needed to send more than one variable.

Any ideas on this?

I must mention that I’m only looking for XHTML valid ways.

Answer 1

You can use the jQuery data method to attach arbitrary data to an element. In your case, if I’ve understood what you’re trying to do correctly, you probably want to do something like this:

$(document).ready(function() {
    $("#yourLink").data("video_id", "<?php echo $video_id; ?>");
});

As you are looking for valid XHTML solutions, you can’t use the HTML5 data-* attributes. If that was the case, you could add the attribute value directly on the element (as you’ve done with the value attribute in your example).

The data method does not require a corresponding data-* attribute to be present on the element, so this will still allow you to write valid XHTML.