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

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

• php
• javascript
• jquery
• image
• et

Share Improve this question Follow asked Mar 1, 2011 at 4:49 Doug MolineuxDoug Molineux 12.5k2626 gold badges9696 silver badges144144 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

A mon 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.