jquery: Auto-refreshing a div

Question

I'm having trouble getting this div to automatically update using jquery - it's essentially a "chat" feature that would have the page refresh every 2 seconds.

Here's the problematic jquery code - I've tried several variances of this with no luck, so completely rewriting it differently is more than welcomed.

function updateChat() {
    $.get("chat_data.php", function(data) {
        $("div#chattable").html(data);
    });

    window.setTimeout("updateChat();", 2000);
}

$(document).ready(function() {
    updateChat();
});

Here's the div code which gets the data from "chat_data.php" - which it should be updating:

<div id="chattable">
 <?php include("js/chat_data.php"); ?>
</div>

And just for reference, here's the code (using codeigniter) of "chat_data.php".

<?php foreach($query->result() as $row):
 echo "<div class='chatrow'>";
 echo "<div class='chattime'>".date("[M.d] g:ia",strtotime($row->time))."</div>";
 echo "<div class='chatnamematch'>[".$row->name."]</div>";
 echo "<div class='chatbody'>".$row->body."</div>";
 echo "</div>";
endforeach; ?>

Answer 1

Everything looks like it should work. Does the URL in $.get need to be "js/chat_data.php" instead of "chat_data.php"?

Also I would take the php include out of the div because it's just going to load via AJAX anyway.

Answer 2

A couple of thoughts and an alternative code example. It is hard to tell where your problem is, so these are just a few ideas.

• You could move the waiting to your PHP instead of using the javascript timer to re-execute

• Try using the simpler jQuery.load() method.

  function updateChat() {
  
  
   $("#chattable").load("chat_data.php", function() { updateChat(); });
  
  
  }
  

On the PHP side,

  sleep(2); // sleep for two seconds before returning output

The effect is similar, but simplifies it a bit. The updateChat() function is not called until the output is returned.

Well, just an idea. Not sure that it is the right solution, but it could help you isolate your issues (taking out the js timer variable).

Answer 3

The error that you get, of Call to a member function result() on a non-object in /var/www/js/chat_data.php on line 1 means that the variable $query is not being set correctly. You said you were using CodeIgniter, is so, which folder is the file ajax_data.php located in? Application/controllers?