jQuery replace table rows with new data

Question

I'm trying to replace a table with new data I get via ajax. The first time works just fine, but then the rows get added instead of replaced, so I end up with duplicate rows.

Here's some of my code:

            success: function(data){            
            $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove();
            counter= 1;
            $.each(data, function(i, val){  
                        newPropertyRows += '<tr>';
                                $.each(val, function(key, info){
                                    var skip = false;
                                        if(key == "Id") {                                           
                                                Id =  info;
                                                newPropertyRows += '';
                                                skip = true;
                                        }
                                        if(key == "thumbs"){
                                                info = '<img width="100px" src=uploads/properties/'+Id+'/thumbs/'+info+' />';
                                                newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';  
                                                skip = true;
                                                counter++;      
                                        }
                                        if(skip == false){
                                                newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';                      
                                                counter++;      
                                        }

                                        info = '';
                                });                     
                        newPropertyRows += '</tr>';                         
            });                     
                $("#featured_listing_tbody").html(newPropertyRows);
        }

Oleg · Accepted Answer · 2011-03-28 13:30:11Z

2

Probably the problem is not in the part of code which you posted. For example in the current code you use always += operation with the newPropertyRows variable. Are you reset it to empty string before every ajax call?

By the way it seems to me that you don't call $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove() at the beginning of success handler because you use $("#featured_listing_tbody").html(newPropertyRows); later which will overwrite the whole body of the table.

answered Mar 28, 2011 at 13:30

Oleg

222k36 gold badges414 silver badges826 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dunhamzzz · Accepted Answer · 2011-03-28 12:42:40Z

2

I have a suggestion, instead of returning a data object and converting it to HTML in javascript, just return the data as the required table rows. As you're already generating them for the page you should have the logic/template to do it again easily.

To replace the data I would just include a <tbody> tag around your data rows, and in your ajax success function just replace its contents - instead of doing the complicated selector to omit the first table row which I assume are you column headers.

$("#featured_listing tbody").html(data); //Replace contents of <tbody> tag

And the table:

<table>
    <thead><tr>....row headers...</tr></thead>
    <tbody>...data rows...</tbody>
</table>

answered Mar 28, 2011 at 12:42

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

2 Comments

Steve Fischer Over a year ago

ok i understand an like the idea. but as the results grow over time i'm afraid the extra data will slow down the process. am i crazy(don't awnser that lol)

Dunhamzzz Over a year ago

Downloading a few table rows and spitting them out will be quicker than looping through a data and creating them on the fly, especially with those counters and stuff. That way the load is on your server and not on the users (potentially stone age) browser.

Johann du Toit · Accepted Answer · 2011-03-28 12:42:13Z

1

Not quite sure if you store the record for the table or it's real-time and not stored anywhere.

But if it's stored, you could try generating the html for the entire table or just the rows at the server side and then simply replace the container / table content with the data received from the server.

answered Mar 28, 2011 at 12:42

Johann du Toit

2,6672 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery replace table rows with new data

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related