14

I have a simple span like so

<span class="action removeAction">Remove</span>

This span is within a table, each row has a remove span.

And then I call a URL using AJAX when that span is clicked. The AJAX event needs to know the ID of the object for that row? What is the best way of getting that ID into the click function?

I thought I could do something like this

<span class="action removeAction" id="1">Remove</span>

But an ID should not start with a number? Right? Then I thought I could do

<span class="action removeAction" id="my1">Remove</span>

Then just strip the 'my' part from the ID, but that just seems Yuk!

Below is my click event and where my AJAX event is.

<script type="text/javascript" language="text/javascript">

$(document).ready(function()
{

    $(".removeAction").click(function()
    {
        //AJAX here that needs to know the ID            
    }
});

</script>

I am sure there is a nice way of doing this?

Note: I am not looking for

$(this).attr("id");

I want to be able to pass more than one piece of information

Thanks. Jake.

Jake N
  • 10,535
  • 11
  • 66
  • 112

5 Answers5

14

If you insist on using old-school HTML 4.01 or XHTML:

$('.removeAction').click(function() {
 // Don’t do anything crazy like `$(this).attr('id')`.
 // You can get the `id` attribute value by simply accessing the property:
 this.id;
 // If you’re prefixing it with 'my' to validate as HTML 4.01, you can get just the ID like this:
 this.id.replace('my', '');
});

By the way, in HTML5, the id attribute can start with a number or even be a number.

Then again, if you’re using HTML5 anyway, you’re probably better off using custom data attributes, like so:

<span class="action removeAction" data-id="1">Remove</span>
Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
3

$(this) within your click function represents the clicked element

$(".removeAction").click(function() {
    //AJAX here that needs to know the ID
    alert($(this).attr('id'));           
}
Flatlin3
  • 1,658
  • 14
  • 26
1

The following code will get you the ID of the clicked span. Using the ID isn't perfect, but it will work.

$(".removeAction").click(function() {
  alert($(this).attr("id"));
});
GlenCrawford
  • 3,359
  • 3
  • 26
  • 34
1

You could have a hidden field on each row which stores the ID and/or other data needed in a JSON object & use that instead of hacking around with the span tag.

<tr>
<td>
<span class="action removeAction">Remove</span>
<input type="hidden" value="1" />
</td>
</tr>

$('.removeAction').click(function(){
  var id = $(this).next().val();
  // do something...
});

HTH

Sunny
  • 6,286
  • 2
  • 25
  • 27
  • Thanks. Not thought of that. Somewhat *chunky* I feel and not as elegant as custom attributes. – Jake N May 10 '10 at 10:20
  • 1
    @jakenuble - I agree to the "chunky"-ness of the solution. The page might not validate for xHTML with custom attributes... – Sunny May 10 '10 at 10:24
  • 1
    @jakenoble - this is a good place to see some arguments for/against custom attributes: http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml – Sunny May 10 '10 at 10:36
0

You could try jQuery.data(): http://api.jquery.com/jQuery.data , but that would mean server-side generated js code to execute when the page loads so that you can store the ids for later reuse (your remove action)

// this part would have to be server 'generated'
// and by that I'm referring  to the '<?=$row_id?>'
$('table .remove').each(function(){

   var MyElem = $(this);
   MyElem.data('id', <?=$row_id?> );

   MyElem.click(function(){
      the_id = $(this).data('id');
      // ajax call goes here
   });

});
dakull
  • 719
  • 2
  • 7
  • 14