Jquery/ajax caching issue - Firefox won't refresh modified images

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.

Answer 2

我也遇到过类似的情况，ajax返回的内容没有刷新，我最终向返回的内容添加了唯一的字符串，这似乎可以解决问题。...只是为了使返回的内容不同于可能缓存的内容， jQuery已经为请求添加了一个唯一的变量值，但这对我的情况没有影响。

Answer 3

This worked for me (in the php function):

$time = date('Hi-s');

echo ""

It doesn't change the filename but makes the image src unique and prevents the caching issue.

Answer 4

Is there any chance you can post the code that you are using to refresh the image?

Can't you just change the src attribute on the image, to save getting the image using ajax?

$('img').attr('src', $('img').attr('src')+new Date().getTime();)