Question

I’m working on a script that uploads and crops images. It’s jquery/ajax based. The idea is that after image is uploaded, it’s being displayed in a div without reloading a page. That’s done with jquery ajax function. Each image has then a ‘crop’ button which when clicked opens a simple-modal window in which one can crop and save the image. After saving it, modal windows closes and refreshes the div by loading it’s content again with ajax. This is were I’m having a problem. Firefox from some reason keeps old image on the screen and won’t refresh it to display it’s cropped version.

I already changed from load() function to ajax() function (with cashe: false param). I added php no-cache header and I’m also adding random string to the invoked url. Nothing helps tho on Firefox (it’s fine on chrome)

Any ideas?

Code:

function load_posted_images(){

$.ajax({
    url: "/ajax/ad_wizard_images.php?uid=1&rand=" + new Date().getTime(),
    type: "POST",
    cache: false,
    success: function(data) {
        $('#image-list').html(data);
    }
});}

Answer 1

In any case, you could try to save the cropped image under a different name (for example append a few digits at the end). Then when you refresh the div, you specify the new image name.