Updating table row by given id with jQuery

Question

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?

Answer 1

You can't have anchors inside the table but outside the table rows. All content in a table has to be inside the table cells. If you put content outside the cells, browsers try to fix the code so that it's possible to display it, usually by moving it to after the table.

Manipulating content in a table can be tricky, it can act up if you add rows as html chunks rather than row elements. Use the jQuery function to create elements from the string that you get.

var row = $(msg);
$('#p' + prod_id).replaceWith(row);

Answer 2

Nothing seems wrong with the idea.

Try just replacing the content of each TD inside that TR instead of removing and adding a new one.

Answer 3

Just it is a idea, tryout this

Your tr must be single or many, concate tr product id with constant and with increment value, like this

 <tr id="p{product_id}cnt1" class="item-row">
 <tr id="p{product_id}cnt2" class="item-row">

If you are going to delete means just the pass the tr position with product id and get the proper value to removed and display the tr in the order.

Answer 4

You can not have any non-table elements directly inside <table> but not inside <td> or <th>. Browsers won't render it correctly.

So you have to place anchors in another <tr><td> .. </td></tr>

But if they are there only to remove row and create new one, you can try replaceWith() instead:

$('#p' + prod_id).replaceWith(msg);