Refresh Image PHP and Javascript

I am using a Comet, Realtime engine called APE, and I am using jQuery to refresh a PHP image. Initially I load the image like this:

<div id="container">
<img src="image.php" style='background: url(../assets/load.gif) no-repeat center center;margin-left:42px;' alt=' Loading ...' width="500px" height="300px" />
</div>

And then when I receive an event I do this:

$("#container").empty();
$("#container").html('<img src="image.php?device='+device+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>');

device is a var that I receive from the event, so for example I get device1, everything works ok (the image is actually a Chart) and the title changes to "device1" and it plots the last 5 minutes

However, my problem is every single time I receive an event, after this initial one, the date remains at the same five minute period. My device is the same each time, but inside my script I calculate the time epoch 5 minutes ago to the current time, but this script doesn't seem to update the image. Is it being cached or something?

I have tried using this at the top of the page:

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>

I can wait about 10 minutes, send an event, but the time period is still from the initial load, I thought that the "empty()" would clear the container out, reload the image and therefore rerun the script. Any advice would help!

Thanks

Answers:

Answer

A common approach is to add a trivial var to the query string that holds a unix timestamp; The browser sees each call as a call to a unique image. e.g.

'image.php?device=' + device + '&t=' + Math.round((new Date()).getTime() / 1000);

So that it doesn't think it has a cached image. ( though it will continue whatever cache policy lead to this issue )

Answer

Add an extra random variable onto the image path.

$("#container").html('<img src="image.php?device='+device+'&rand='+(math.random * 1000000)+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>');

That will make it appear like a different URL and cause the browser not to cache. This is the same tactic used by YUI.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.