show only latest rows from a database with jquery - php

Question

I've been trying to retrieve new rows from a databse with ajax. like the sort of thing that happens on facebook chat. What I've been doing is I get the last ten rows from the database with ajax every two seconds and try to show the ones the user hasn't seen. I have two columns, id and name. I created an onordered list and set each li elements id to the id from the database. each li is for a row. then I try to get the id of the last li element and check if the id from the database is greater, if it is then append a new li containing the id and name. but for some reason, it just appends the whole 10 rows every two seconds. what have I done wrong?
this is the code I'm using.
<ol id="output"><li id="1">test</li></ol>
<script id="source" language="javascript" type="text/javascript">
function reloadw()
{
$.ajax({
url: 'api.php',
data: "",
dataType: 'json',
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
var lastId = $('ol#output li').attr('id');
var id = row[0];
var vname = row[1];
if(id > lastId){
$('#output').append("<li id="+id+"><b>id: </b>"+id+"<b> name: </b>"+vname+"</li>");
}}
}
});
} setInterval(reloadw,2000);
this is what I use in retrieving data from the db
$result = mysql_query("SELECT * FROM $tableName ORDER BY id");
$data = array();
for($i=0;$i<=9;$i++){
$row = mysql_fetch_row($result);
$data[] = $row;
}
echo json_encode( $data );

Answer 1

If you take out issue where you are fetching the data, another issue you have is in your javascript code.
Change
var lastId = $('ol#output li').attr('id'); //will always fetch the first li's id
to
var lastId = $('ol#output li:last').attr('id');
With the lastId selection code that you have, it will always fetch only the id of the first one and your comparison id > lastId will always be true except for the first element's id. So you end up appending even if that record has been already added before.
But ideally you should do this logic at the server to get only the data to be presented.

Answer 2

If you want to sort last result from database this is very simple, you can try this code in your sql: $result = mysql_query("SELECT * FROM $tableName ORDER BY id DESC");

Answer 3

var lastId = $('ol#output li').attr('id');
That line will always lookup the first element in the list, whereas you probably are looking for the last. Try replacing the line with:
var lastId = $('ol#output li').last().attr('id');

Answer 4

You could write your JavaScript code like this.
<script>
var seen = new Array();
function reloadw(){
$.ajax({
url: 'api.php',
data: "",
dataType: 'json',
success: function(rows){
rows.forEach(function(row){
if(seen.indexOf(row.id) == -1){
$('#output').append("<li id="+row.id+"><b>id: </b>"+row.id+"<b> name: </b>"+row.name+"</li>");
seen.push(row.id);
}
});
} setInterval(reloadw,2000);
</script>