Auto refresh multiple divs with Jquery

Question

Im creating a dashboard for a large display at work, I have managed to get one div auto refreshing a php request page, but I can't think of a way of using this function on another div for another script without copying the entire function and renaming it, which just seems dumb.

This is what I have so far:

<script type="text/JavaScript"> 
$(document).ready(
function update() 
{
    $.get("response.php", function(data){
            $("#ajaxtest").html(data);
            window.setTimeout(update, 10000);
        });
});
</script>

I did so some searching on stackoverflow and found this nifty little extract, although its for single div use only... (second example: auto refreshing div with jquery)

Answer 1

You've out your update function as to be called directly when the document is ready. That's not necessarily a good idea, you want that function to be callable multiple times. For example, consider the following (untested code!):

function update(divId) 
{
   $.get("response.php", function(data){
   $(divId).html(data);
   window.setTimeout(update, 10000);
}

and then

$(document).ready(function(){
   update("#ajaxtest");
   update("#otherdiv");
   update(".divsbycssclass");
});

If you need a different url pass that in too. You can call this update method by timer or event:

$("a").click(function(){
   update("#ajaxtest");
});

Is that what you were referring to? If not, feel free to comment and I'll edit.

Answer 2

$(document).ready(

function update(el) 
{
    $.get("response.php", function(data){
    el.html(data);
    window.setTimeout(el, 10000);
});

update($("#ajaxtest"));

});

Answer 3

What you need to do essentially is to return more than one set of contents at once. This means sending the data in some kind of structure, so your JS can quickly parse it and apply the contents as appropriate. The nicest way to do this is with JSON -- a data-exchange format that is both easily readable and a subset of Javascript.

First, change your PHP to make an array of content to send:

$divs = array (
    'firstDiv'  => $firstDivContent,
    'secondDiv' => $secondDivContent
);

You'll then need to encode them as JSON using json_encode:

$divs_json = $divs;

Then return this to the browser with the appropriate headers:

header('Content-type: application/json');
echo $divs_json;
die();

In your Javascript, you'll then only need to make one request to receive both parts. You can use setInterval and an anonymous function to make the code repeat every 10 seconds:

setInterval(function(){
    $.get('response.php', function(data) { //data is a JS object with two properties, firstDiv and secondDiv
        $('#firstDiv').html(data.firstDiv);
        $('#secondDiv').html(data.secondDiv);
    });
}, 10000);

Answer 4

It's just an untested idea but give it a try...

function update(){
    // all your defined classes which are .refreshingDivs will do the following
    $('.refreshingDivs').each(function(){
        // foreach refreshingDiv, get their id attribute and send with request
        // so that response.php knows what to do for each specific div
        $.get('response.php?id=' + $(this).attr('id'), function(data){ 
            // place the returned data inside refreshingDiv children 
            // which has the .placeholder class
            $(this).children('.placeholder').html(data);
            window.setTimeout(update, 10000);
        });
    });
}
$(document).ready(function(){
    update();
});

If you have controllers to refresh specific divs, Simon's approach seems to suit you best.

Answer 5

I add some problems getting this to work, so based on Ran Bar-Zik's answer, I came up with the following that seems to work for me.

$(document).ready(function(){
    var refreshId = setInterval(function(){
        update("#test", "/test.php");
    }, 30000);
    $.ajaxSetup({ cache: false });

    update("#test", "/test.php");
});

function update(divId, fileId)
{
    $.get(fileId, function(data){
    $(divId).html(data);
    });
}

I have now idea if that is right or wrong, but it works for me.

The line

window.setTimeout(update, 10000);

in Ran Bar-Zik's answer just did not want to work for me, no idea why. Initial load worked, but the refresh didn't, so I modified the code to the above to get it to work.