2

I'm working on separating JavaScript code from my HTML. I currently have code that looks like this:

<div onclick="return do_something_with('100566');" class="clickable">Click Me!</div>

I'd like to swap the onclick to an attribute containing just the parameter I'm passing to the method.

I'm using jQuery for this with the following type of code:

var $j = jQuery;
$j(function(){
    $j('.clickable').live('click',function(){
        param = $j(this).attr('attribute_name');
        do_something(param);
    });
});

What attribute can I use for 'attribute_name' that would be safe for communicating this parameter value? I know I can use id, but I would have already defined an element with the same id in a different place in the DOM.

Any suggestions?

divibisan
  • 11,659
  • 11
  • 40
  • 58
Jimmy Z
  • 723
  • 1
  • 5
  • 18
  • See: http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags http://stackoverflow.com/questions/439110/is-it-all-right-to-add-custom-html-attributes http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml http://stackoverflow.com/questions/992115/custom-attributes-yay-or-nay – nickf Aug 25 '09 at 01:02

6 Answers6

4

I usually add a meaningful prefix like Client-100566 and then access it using this code:

var param = $(this).attr("id").split("-")[1];

Edit: Removed suggestion for invalid all-number id token.

cdmckay
  • 31,832
  • 25
  • 83
  • 114
  • I really like this idea. I think it would work for many of the things I need. – Jimmy Z Aug 25 '09 at 13:41
  • You **need** to add the prefix anyway, you cannot start an id with a number (well, you can but it's not valid HTML) http://www.w3schools.com/tags/att_standard_id.asp – nico Jul 03 '10 at 11:01
  • Ah, I was not aware of that. Just to verify, I double checked it in the W3C standard (http://www.w3.org/TR/REC-html40/types.html#type-name). – cdmckay Jul 03 '10 at 14:53
2

I often find myself either using id for things that will be unique, or sticking in a hidden <span> with the data.

gnarf
  • 105,192
  • 25
  • 127
  • 161
1

Couldn't you use the rel tag on an a inside the div? It allows for 1 parameter or n parameters to be passed through to doSomething.

<div>
  <a class="clickable" rel="param1 param2 param3">Click Me!</a>
</div>

So now when param is sent to doSomething it is a space separated list which param.indexOf("param1") can be used to check what parameters have been sent through?

Colin
  • 2,442
  • 5
  • 24
  • 30
0

Why don't you make these a tags? There are several sites that use the anchor (the #someThing) part or use the rel attribute.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
  • I can do this with much of my application, but I'm looking for other areas where a div may need to listen for x event and potentially pass multiple parameters. – Jimmy Z Aug 24 '09 at 23:30
  • Divs are mean for block elements not textual data. You could always comma-delimit the `#` like `#param1,param2`. – Daniel A. White Aug 24 '09 at 23:51
  • Right. I have some block elements that listen for events and perform actions on other blocks. I know it sounds strange, but it's a requirement from client. My approach at this time will be to use a tags wherever possible and use the rel and href for as much of the parameter passing. I will be using comma or space-delimited lists for multiple params. I also like id="{word}-{real_id}" for elements that may need to pass an already used element id as a parameter. Thanks for the responses. I would have voted up more of the comments, but since I'm new here, I don't have that privilege yet. – Jimmy Z Aug 25 '09 at 13:38
0

You could use the class or title attributes as space separated lists of parameters. The downside to the title is that it would show as a popup when your element was hovered:

<div class="clickable param1 param2 param3">

or

<div class="clickable" title="param1 param2 param3">

Here's a list of other attributes you might consider too.

Pat
  • 25,237
  • 6
  • 71
  • 68
  • I'd rather not use the title for the "hover" reason you mentioned earlier. Because I'm using class as a selector for adding certain listeners, I think I'll stay away from that as well. – Jimmy Z Aug 25 '09 at 13:40
0

You can just make up any attribute name.

<div onclick="foo();" silkyvalue="12938">hello</div>

I'd generally go with some naming format though, like 'my_somethingID'.

Noon Silk
  • 54,084
  • 6
  • 88
  • 105
  • Well, you're both wrong. It's fine *HTML*, it may not pass some sort of W3C validation mechanism under a given doctype, but it's valid. Another example of a custom attribute is 'accesskey'. This is used by phones, to map numbers pressed, to links. It is completely acceptable to use this approach, even if neither of you are familiar with it. As to whether it's the best way to solve the OPs underlying problem, that's debatable. But it is valid. – Noon Silk Aug 25 '09 at 01:05
  • 3
    It isn't valid HTML. The HTML standard doesn't allow for an attribute of "silkyvalue". The w3c HTML validator says: Attribute "SILKYVALUE" is not a valid attribute. If you made it HTML5 you could use the new data-* attributes and still be valid, so data-silkyvalue="12938" would be a valid attribute, but as the specification stands now, these attributes aren't permitted on many (if any) elements. – jsnfwlr Aug 25 '09 at 01:15
  • phalacee, I said it doesn't validate, under a given doctype, but that doesn't mean it can't be used. See my comment about 'accesskey'. It's an acceptable approach. Quirksmode even discusses it. Please do a bit of research. – Noon Silk Aug 25 '09 at 01:17
  • If it doesn't validate, how can it be valid? Just because you can do it doesn't mean it's the right way to do it ... as for the accesskey, it is valid even by w3c standards - http://www.w3.org/TR/html401/index/attributes.html (see accesskey entry) – jsnfwlr Aug 25 '09 at 04:10
  • 1
    This discussion is purely academic. Supported by a validator or not, the approach works, and is supported in all browsers. I'm okay with it, on that basis. – Noon Silk Aug 25 '09 at 04:22
  • I'm with silky on this, I see no problem with using custom attributes. They're supported by all the browsers and usable within jQuery. – cdmckay Aug 25 '09 at 06:30
  • I think the data-* attributes are really what I'm looking for, but that comes with HTML5. Luckily, HTML5 is actually becoming a reality. – Jimmy Z Aug 25 '09 at 13:46
  • 2
    @silky, @cdmckay: you can use a hammer to drive screws into wood. But are you going to trust a joiner who does so? – NickFitz Aug 25 '09 at 14:10
  • @NickFitz: Other than not validating, what issues do you have with custom attributes? – cdmckay Aug 25 '09 at 16:56