Append a new Row in HTML table without reloding the whole page

Question

I have an admin portal where we can see how many users are registered. Data is stored in MySQL.

I need to append a new row automatically when a new data available in mySQL table without reloading the whole page

<table>
    <tr>
    <th>NAME</th>
    </th>Register Time </th>
     </tr>

     <?php
     while($row=mysql_fetch_array(mysql_query("SELECT * FROM `register`"))){
         echo '<tr>';
         echo '<td>'.$row['name'].'</td>';
          echo '<td>'.$row['reg_time'].'</td>';
          echo '</tr>';
     }
     echo '</table>';

And what have you tried in order to accomplish this? What about your attempt did not work? — James Montagne, Jul 16 '13 at 20:02
Maybe this can help: http://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript — Jairo Filho, Jul 16 '13 at 20:02
what have you tried? Usually this community wants to see some sort of initial problem solving effort instead of an outright "code this for me please, from step 0" — bowlerae, Jul 16 '13 at 20:02
well I use META TAG for refreshing the whole content of the page but i need something to do it without any reload @JamesMontagne — sudo, Jul 16 '13 at 20:05

score 1 · Answer 1 · edited May 23 '17 at 12:21

Do not use mysql_* functions. Use mysqli_* instead. When should I use MySQLi instead of MySQL?

Result page:

<table class="users">
    <tr>
        <th>NAME</th>
        </th>Register Time </th>
    </tr>

<?php

$query = mysql_query("SELECT * FROM `register`");
$lastId = 0;
while ($row = mysql_fetch_array($query)) {
    $lastId = $row['id'];
    echo '<tr>';
    echo '<td>'.$row['name'].'</td>';
    echo '<td>'.$row['reg_time'].'</td>';
    echo '</tr>';
}
echo '</table>';
echo '<script>var lastId = '. $lastId .'</script>'; // remember the last id

?>

Javascript loaded at the same page:

$(document).ready(function() {
    var usersTable = $(".users");

    setInterval(function() {
        $.ajax({
            url: 'get_users.php?id='+lastId,
            dataType: 'json',
            success: function(json) {
                if (json.length > 0) {
                    $.each(json, function(key, user) {
                        usersTable.append('<tr><td>'+user.name+'</td><td>'+user.reg_time+'</td></tr>');
                        lastId = user.id;
                    });
                }
            }
        });
    }, 10000);
});

get_users.php:

$lastId = (int)$_GET['id'];

$query = mysql_query('SELECT * FROM `register` WHERE `id` >' . $lastId);
$result = array();

while ($row = mysql_fetch_array($query)) {
    $result[] = $row;
}

echo json_encode($result);

The main point is to make ajax call every X seconds and append all users that registered after the last user on the current page.

To read:

its not working actually the echo ''; // remember the last id didnt get the last id as it is out of the while loop — sudo, Jul 18 '13 at 06:31
I gave you a simple example, of course I didn't test it. Anyway, fixed that, look at my answer now. — ozahorulia, Jul 18 '13 at 09:10

Append a new Row in HTML table without reloding the whole page

1 Answers1