CODEWITHSUNDEEP
phpjquerycodeigniter
scrot
scrot

Reputation: 1647

jQuery: Auto-Refreshing a `<div>`

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; ?>

Upvotes: 1

Views: 2436

Answers (3)

Ali
Ali

Reputation: 267067

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?

Upvotes: 2

jonstjohn
jonstjohn

Reputation: 60276

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

Upvotes: 1

Jesse Dearing
Jesse Dearing

Reputation: 2271

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.

Upvotes: 2

Related Questions