1

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 two seconds. I've tried several variances of this with no luck, so completely rewriting it differently is more than welcome.

jQuery code: 

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. This should be updating:

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

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; ?>
imlouisrussell
  • 936
  • 11
  • 30
scrot
  • 1,647
  • 8
  • 24
  • 31
  • what happens when you try to run this code? have you looked at firebug output? – jonstjohn Feb 25 '09 at 16:10
  • 1
    Should look at the solution http://stackoverflow.com/questions/220767/auto-refreshing-div-with-jquery/220800#220800 to see a slightly better way to do the jquery callback (handles timeouts/failures more robustly) – gregmac Mar 11 '10 at 16:03

3 Answers3

2

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.

Jesse Dearing
  • 2,251
  • 18
  • 20
  • unfortunately it doesn't load if i don't include it, so jquery must not be reaching it correctly. Here's the error it throws to me when i put "js/chat_data.php" in the jquery: Fatal error: Call to a member function result() on a non-object in /var/www/js/chat_data.php on line 1 – scrot Feb 25 '09 at 16:13
  • Yes, it's now an issue with getting codeigniter to push the info correctly, thank you. – scrot Feb 25 '09 at 16:47
2

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?

Ali
  • 261,656
  • 265
  • 575
  • 769
  • I had it in a separate area completely. It's referencing the file correctly now, however codeigniter is having a problem producing it (presumably because the controller sends the data to the view, and then the view asks for that data from an additional .php file (chat_data.php). – scrot Feb 25 '09 at 16:31
  • What I suggest is that you move the code from chat_data.php to its own file (in application/controllers). Including files from views doesn't work very well due to the way codeigniter is designed. Also view files don't get the $db object I believe – Ali Feb 25 '09 at 17:06
  • Also, remember to call htmlspecialchars() over $row->name/body, otherwise chatters might start saying things like or – bobince Feb 25 '09 at 20:33
  • Russian malware is actually useful – Ali Feb 26 '09 at 08:25
1

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).

jonstjohn
  • 59,650
  • 8
  • 43
  • 55