CODEWITHSUNDEEP
javascriptjqueryhtmldom
fabrik
fabrik

Reputation: 14365

Updating table row by given id with jQuery

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:

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

Upvotes: 8

Views: 15345

Answers (5)

Siva Raparla
Siva Raparla

Reputation: 104

<table>
   <tr id="1234">
       <td>ID</td>
       <td>tracking</td>
       <td>charge</td>
  </tr>
</table>
 <form>
      <input id="modalTrackingNumber" type="text">
      <input id="modalCharge" type="text">
 </form>

store the tr id in a variable called updateID (make it a global variable) and then in the success of the ajax use the jQuery selector $( ‘tr#2 td’ ) to returns an array of td elements inside tr#2. So for Tracking# td at index 1 is assigned to tracking112 variable. Similarly td at index 2 is assigned to charge112.

   var tracking112=$('tr#' + updateID + ' td' )[1];
   var charge112= $('tr#' + updateID + ' td' )[2];

Form posted values assigned to the table tr td elements.This would update the row with values that have been posted by the form.

     $( tracking112 ).html( $( '#modalTrackingNumber' ).val() );
     $( charge112 ).html( $( '#modalCharge' ).val() );

Upvotes: 0

Guffa
Guffa

Reputation: 700402

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);

Upvotes: 7

Tatjana N.
Tatjana N.

Reputation: 6225

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);

Upvotes: 3

Karthik
Karthik

Reputation: 3281

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.

Upvotes: 0

Makram Saleh
Makram Saleh

Reputation: 8701

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.

Upvotes: 0

Related Questions