Question

In my main PHP page I have a table in which i entered some values to use as header. The code of that page is:

<form  method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>">
<table id="npc" cellspacing="10">
    <tr>
        <td> Building</td>
        <td> Level</td>
        <td> Lumber</td>
        <td> Clay</td>
        <td> Iron</td>
        <td> Crop</td>
    <tr>
</table>
</form>

I’m using jQuery and AJAX to call res.php.
The jQuery code is:

$.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                        $('#npc').html(data);
                    }
                });

In the res.php page I am retrieving data from the database using the parameters that I have passed. Then I am displaying it in the table id="npc".

The contents of the res.php page are:

$result = mysql_query($query) or die('Error in Child Table!');

while( $data = mysql_fetch_assoc($result))
{
echo '<tr><td>'. $building. '</td><td>'. $level. '</td><td>'. $data['lumber']. '</td><td>'.$data['clay']. '</td><td>'. $data['iron']. '</td><td>'. $data['crop'].'</td></tr>';
} 

But for some reason instead of the data being appended to the end of the table id="npc" it is removing the previous data and then the new data is being displayed.

How do I keep the previous data and append the new data to the table?

Answer 1

Instead $('#npc').html(data); try $('#npc').append(data);