How to refresh <DIV>

Question

How to refresh the auto refresh div inside the div theres is php

The following code dont work?

var refresh = setInterval(function() {  $("#recent_activity").html(); }, 1);

Answer 1

You can write a function something like this and call it on 'document.ready'

function refreshMyDiv()
{
   $("myDiv").fadeOut("slow");
   //Code to refresh the content goes here
   //could be a AJAX call
   $("myDiv").fadeIn("slow");
   setTimeout("refreshMyDiv();", 60000);

} 

Answer 2

there is nothing about the div 'recent_activity' that perpetually synchronizes with your server. However, supposing you had some dynamic webpage recent_activity.php which returns current data from your recent-activity database, you could load that into the div every once in a while with

var refresh = setInterval(function() { 
    $('#recent_activity').load('recent_activity.php');
}, 1);

P.S. 1 millisecond spamming is usually a bad idea. Look into the comet pattern if you want sub-second responses to activity.

Answer 3

Based on x0n's comment, which I think is a fair guess, I am guessing that you want to automatically refresh a <div> with content from the server every X seconds. In your example, your second argument to the setInterval function is 1. This is a really bad idea, as the delay is in milliseconds, so you would be firing off 1000 requests a second (not that the browser would let you, but still).

Anyhow, if that's what you want, you would need to do this:

var timer;
var seconds = 30; // how often should we refresh the DIV?

function startActivityRefresh() {
    timer = setInterval(function() {
        $('#recent_activity').load('recent_activity_ajax.php');
    }, seconds*1000)
}

function cancelActivityRefresh() {
    clearInterval(timer);
}

Your server-side script (recent_activity_ajax.php in the example) would then need to return whatever you want the <div> to be populated with - just that, not the headers or footers or anything else. If you wanted this to start when the page loads, you would simply call startActivityRefresh:

$(function() {
    startActivityRefresh();
});

If this is not at all what you meant by refreshing the <div>, you're going to need to clarify. :)

EDIT:

In response to your comment: you can't make Javascript "refresh" the contents of the dynamic PHP code. This just isn't possible as the browser can't really execute a server side language like PHP. You have to call the server again. In order to make this cleanest you should probably move the code that fills the contents of #recent_activity to a function, call that once when the page loads and have a different file that simply outputs that code to be able to refresh it dynamically. You should probably look into MVC patterns from here, but I'm not sure if you're quite ready for that...

Answer 4

Unfortunately I do not have time to type out a whole response here, but if you look at the PeriodicalUpdater class in the Prototype Javascript/Ajax library, it looks like it does exactly what you are looking for:

http://www.prototypejs.org/api/ajax/periodicalUpdater

I have used this many times with much success. If you need more details, I can provide them in a few hours. Good luck with your problem!

Answer 5

http://www.ajtrichards.co.uk/heartbeat/

$(document).ready(function(){
$.jheartbeat.set({
   url: "data.php", // The URL that jHeartbeat will retrieve
   delay: 1500, // How often jHeartbeat should retrieve the URL
   div_id: "test_div" // Where the data will be appended.
}); });