my first jquery ajax page (beginner)
<p>I am new to js and jquery. The page I'm working on is a message board. First the page displays 10 most recent messages and then my jquery function is used to update the board automatically, pulling new data every 2 seconds. The most recent messages are displayed on the top. The older messages should be removed from the page.</p>

<p>Please note that this is a simplified version of the page. I'm trying to work out the logic before implementing it to the actual page. Hence instead of the message, the id is showed etc.</p>

<pre><code>&lt;?php
include ("../../db.php");
 ?&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;script type="text/javascript" src="../jquery/jquery.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;script&gt;
function update() {
  $("#notice_div").html('Loading..'); 

  $.ajax({
    type: 'GET',
    url: '2include.php?lastid='+ latestid + '',
    timeout: 2000,
    success: function(data) {

      $("#cont_div").html(data);
      $("#cont_div").clone().prependTo($("#newdiv")); // adding the pulled data to newdiv 
      $("#notice_div").html(''); 
      window.setTimeout(update, 2000);
      // animate
      $("#newdiv").slideDown(1000,function(){ });

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
});
}
$(document).ready(function() {
    update();

});
&lt;/script&gt;

&lt;div id="cont_div"&gt;&lt;/div&gt;

&lt;div id="newdiv"&gt;&lt;/div&gt;

  &lt;? 
  $count = 1; // first message is the newest
  $get = $DB-&gt;query("SELECT * FROM board ORDER BY id DESC LIMIT 10", __FILE__, __LINE__);
while ($msg = $DB-&gt;fetch_array($get))
{
    echo "&lt;div id='msgid' style='background-color:yellow'&gt;".$msg['id']."&lt;/div&gt;";
  if($count == 1){ 
  $latestid = $msg['id']; // newest message - passing to js
  }
  $count++; 
} ?&gt;
&lt;script&gt;
var latestid = &lt;?=$latestid?&gt;;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>2include.php -</p>

<pre><code>&lt;?
include ("../../db.php");

 $la = $_GET['lastid'];

  $count = 1; // first message is the newest on load
  $get = $DB-&gt;query("SELECT * FROM board WHERE id&gt;'$la' ORDER BY id DESC LIMIT 5", __FILE__, __LINE__);
while ($msg = $DB-&gt;fetch_array($get))
{
    echo "&lt;div id='msgid' style='background-color:red'&gt;".$msg['id']."";
  if($count == 1){ 
  $latestid = $msg['id']; // newest message
  }
  $count++; 
  ?&gt;
  &lt;script&gt;
var latestid = &lt;?=$latestid?&gt;; // after pulling the newest message we overwrite latestid with the newest msg id
&lt;/script&gt;
&lt;? } ?&gt;
</code></pre>

<p>result after inserting 3 new rows to the table after the first page load:</p>

<p><a href="http://i.stack.imgur.com/rPf8N.jpg" rel="nofollow">http://i.stack.imgur.com/rPf8N.jpg</a> (sorry can't post images yet)</p>

<p>the top red one is cont_div and appears every time new data is pulled for 2 seconds.</p>

<ol>
<li>What do you think of my code? I'm pretty new to jquery and not that good with javascript. This bit of code has taken me over 7 hours to build.</li>
<li>Animation is not working (new messages should appear with the slide down animation.</li>
<li>cont_div is displayed on the page (top red one on the image). Tried to put the content in variables or make the div invisible - nothing worked. If I made it invisible, the style would be copied to the new_div and it would be invisible there too.</li>
<li>Only 10 messages should be displayed on one page. I haven't figured out how to remove the older messages from the page. </li>
</ol>
