How to pass data using jQuery's ajax methods on click events / links?

Question

Using 'old school' javascript you would put the ID as the parameter in an inline function call (onclick="my_function(28)" or similar), with the ID provided by your server-side code.

Using 'new school' javascript, the function call is abstracted from the element, so how to pass the ID?

My guess is:

<a id="28" class="do-something" href="#">Do something</a>

$('a.do-something).click(function(event){

  element_id = $(this).attr('id');

  $.get('something.php', { id: element_id });

  return false;

});

Is there a convention or best practice you use / have seen?

[Update: added return false; ]

Answer 1

Usually for something like this I'll just use the HREF to store the URL the jQuery handler should use:

<a class="do-something" href="something.php?id=28">Do something</a>

$('a.do-something).click(function(event){
  $.get($(this).attr('href'));
  return false;
});

This way the ID can still be around incase you need it for CSS. Plus if you get to the point of needing multiple parameters to send into the php function you don't have to worry, it's all part of the URL like it normally would be.

The return false prevents the browser from actually going to the link when it's clicked on.

Answer 2

Parrots's answer is best for this specific case: if you are using a link, the href should point to somewhere useful for non-JavaScript users and for people who open the link using middle-click, or right-click-bookmark or whatever.

If you don't have a destination for a link, you shouldn't really be using a link. You could use a span like SO does (although this needs some tabindex and script help if you want to make it properly keyboard-responsive) or, generally best (if you don't mind the extra pixel of padding and movement in IE), a restyled button.

However in the general case you do sometimes need to include additional data that doesn't fit in an existing attribute like href. Sometimes that can be in the id, but then you're a little limited with the characters you use. For example your code is invalid HTML because ids can't start with a number. For numeric ids you can try id="foo-28" and extract the number from code.

Or, you could start putting multiple parameters in class names (class="foo-28 bar-16a") and using a JS function to split, match the named prefix and return the rest. Most characters are allowed in a class name, but of course you couldn't use another space. (You could also encode it in some way in the className, eg. URL-encode.)

Or, you could put a comment inside the element and use DOM methods to get the comment object and extract its data. You might put JavaScript/JSON inside it, eg.:

<span class="do-something"><!-- {foo: 28, bar: '16a'} --> Something </a>

Or, you might use HTML5 data- attributes. Or (...several other options...)