Updating table row by given id with jQuery

Posted by fabrik on Stack Overflow See other posts from Stack Overflow or by fabrik
Published on 2010-04-29T07:27:34Z Indexed on 2010/04/29 7:37 UTC
Read the original article Hit count: 201

Filed under:
|
|
|

Hello all!

I need to update a specific table row (via tr id="unique_key") after a successful AJAX call.

HTML fragment:

<a name=\"p{$product_id}\" class=\"tr{$product_id}\"></a>
<tr id="p{product_id}" class="item-row">
<td><h3>{product_id}</h3><a rel="facebox" href="ajax_url">{product_name}</a></td>
<td>{image_information}</td>
<td>{image_sortiment}</td>
<td>{product_status}</td>
</tr>

Javascript:

// AJAX Call
success: function(msg){
    $('#p' + prod_id).remove();
    $('.tr' + prod_id).after(msg);
    $('#p' + prod_id + ' a[rel*=facebox]').facebox();
}
...

What happens:

  • The table row removed
  • Anchors grouped into one single row (not before their <tr>'s) so my 'hook' disappears
  • AJAX result inserted over the whole table (after my 'hook' but still a wrong place)

What's wrong with my idea? How can i force jQuery to 'overwrite' the required table row?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery