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!
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 )
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.
©2020 All rights reserved.