How to slide in only new posts jquery

Question

Hey guys, I'm using jquery to load posts from another page every 5 seconds by using this code:

<script> 
  jQuery(function($){
    $('#loaddiv').show();
  })

  var auto_refresh = setInterval(
  function(){
    $('#loaddiv').hide().load('reload.php').show();
  }, 5000);
</script>

And here's reload.php:

 <?php
  session_start();

  ini_set('display_errors', 'On');
    error_reporting(E_ALL);

  $mysql=mysql_connect('localhost','***','***');
  mysql_select_db('jmtdy');

  $result=mysql_query("select * from users where username='".$_SESSION['username']."'") or die(mysql_error());
    $dbarray=mysql_fetch_assoc($result);

    $id=$dbarray['id'];
    $result1=mysql_query("select * from friendship where userid='".$id."'") or die(mysql_error());
    $dbarray1=mysql_fetch_assoc($result1);

    $userid=$dbarray1['friendid'];
  $result2=mysql_query("select * from posts where userid='".$userid."' or userid='".$id."' ORDER BY id DESC LIMIT 20") or die(mysql_error());
  if(mysql_num_rows($result2) >=1) {
    while($dbarray2=mysql_fetch_assoc($result2)) {
      echo '<div class="homestatus"><a class="homeusername" href="account.php?user='.$dbarray2['username'].'">'
        .$dbarray2['fname'].' '.$dbarray2['lname'].':<a><p class="homepost">'
        .$dbarray2['post'].'</p><p class="hometime">'.$dbarray2['time'].'</p></div>';
    }
    }
    else {
        echo '<p class="homestatus">No new updates from your friends.</p>';
  }
?>

It's working perfectly but my question is, how can I slide in the new results sort of how Quora slides in new answers in questions using jquery?

---

Ok I came up with this:

<script> 

  jQuery(function($){
    $('#loaddiv').show();
  })

  var auto_refresh = setInterval(
  function(){
    var timestamp = new Date().getTime() - 5000;
    // get posts for the last 5 seconds only
    var new_posts = $.load('reload.php?time=' + timestamp);
    $('#loaddiv').append(new_posts).show('slow');
  }, 5000);
</script>

and this:

<?php   
    session_start();
   ini_set('display_errors', 'On');
    error_reporting(E_ALL);
   $mysql=mysql_connect('localhost','***','***');
   mysql_select_db('jmtdy');
   $result=mysql_query("select * from users where username='".$_SESSION['username']."'") or die(mysql_error());
    $dbarray=mysql_fetch_assoc($result);
    $id=$dbarray['id'];
    $result1=mysql_query("select * from friendship where userid='".$id."'") or die(mysql_error());
    $dbarray1=mysql_fetch_assoc($result1);  
    $userid=$dbarray1['friendid'];
    $time=mysql_real_escape_string($_GET['time']);

   $result2=mysql_query("select * from posts where userid='".$userid."' or userid='".$id."' and time='".$time."' ORDER BY id DESC LIMIT 20") or die(mysql_error());
 if(mysql_num_rows($result2) >=1) {
 while($dbarray2=mysql_fetch_assoc($result2)) {
    echo '<div class="homestatus"><a class="homeusername" href="account.php?user='.$dbarray2['username'].'">'.$dbarray2['fname'].' '.$dbarray2['lname'].':<a><p class="homepost">'.$dbarray2['post'].'</p><p class="hometime">'.$dbarray2['time'].'</p></div>';
    }
    }
    else {
        echo '<p class="homestatus">No new updates from your friends.</p>';
}

?>

But I get this error: Notice: Undefined index: time in /var/www/Cliproid/reload.php on line 13

Answer 1

I would maybe use a unique(auto_increment) id, or a timestamp stored somewhere in the script.

Then use that identifier when making your request, so you only fetch results > last id/timestamp. Then with that result, use $('#loaddiv').prepend(data).fadein() to insert that data to the beginning (top) of the list.

Answer 2

I do not know how Quora works, but use some of the effect in jQuery instead of plain show() function. Try 'animate' or something different http://api.jquery.com/category/effects/

<script> 
  jQuery(function($){
    $('#loaddiv').show();
  })

  var auto_refresh = setInterval(
  function(){
    var timestamp = new Date().getTime() - 5000;
    // get posts for the last 5 seconds only
    var new_posts = $.get('reload.php?time=' + timestamp);
    $('#loaddiv').append(new_posts).show('slow');
  }, 5000);
</script>