AJAX load of a rendered PNG not working

Question

I am rendering a custom image based on some defaults and parameters in POST with a custom php script and the GD library.

I am trying to build a custom form to allow users to select these parameters and then send an AJAX request to render the image and send it back and load a preview in the page.

The problem is that the first preview works, but after that I can not load any more previews. I just keep seeing the same image in the preview window. However, I am writing the image to disk and that is being updated just fine, so I image this is some apache or browser caching. Here is some code:

AJAX request is like

preview = new Image;
preview.src = url;
$(preview).load(preview.src, imagedata, function() {                                               
   $('#gaga-preview-space').html(this);                                                             
});

Where imagedata is an array with bgcolor, etc. I am also generating a timestamp for each request, in hopes that it would stop apache from cachine the response. This has worked in other instances, but not this one.

The php generation script looks like:

// Save file
$file = "/var/www/tribegaga/sites/all/files/gaga_customization/test.png";
$result = imagepng($image, $file);

// Spit out file
header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
header("Pragma: no-cache");
header("Content-Type: image/png");
imagepng($image);

imagedestroy($image);

You'll see I'm sending some headers, but those aren't the issue either.

Perhaps I'm on the wrong path with thinking it is caching. But as I mentioned, the .png generated works fine.

Update: Ok the issue was that the browser doesn't POST to get an image, it GETS, so now my script sends a GET string and it all works wonderfully. But I'd rather not have an image src=http://site/script.php?string=params&test=foo etc.

If you all have any suggstions I'd appreciate it.

Thanks!!

Answer 1

You could try setting an Expires (to a date in the past) and Last-Modified (to the current date/time) header too.