Loading ajax render PNG not working

I am creating a custom image based on some defaults and parameters in POST using a custom php script and GD library.

I am trying to create a custom form so that users can select these options and then submit an AJAX request to render the image and send it back and load the preview on the page.

The problem is that the first preview works, but after that I can't load any more previews. I just see the same image in the preview window. However, I write the image to disk and it updates just fine, so I can see it is apache or browser caching. Here's some code:

The 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 also generate a timestamp for each request, hoping that this will stop apache from cachine's response. It works in other cases, but not in this one.

The php script generation looks like this:

// 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 will see that I am sending some headers, but that is not a problem either.

I may be wrong in thinking this is caching. But as I mentioned, the generated .png works fine.

Update: Ok, the problem is that the browser doesn't receive POST to get the image, it's GETS, so now my script is sending a GET string and it all works fine. But I would rather not have an image src = http: //site/script.php? String = params & test = foo etc.

If you have any suggestions, I would appreciate it.

Thanks!!