jquery ajax cache:false not working

Question

I have some information which I can edit and then update, and then I get the updated content via ajax which works fine, but the image gets cached and does not change (the image has the same name, and if a new image is uploaded it literally overwrites the previous one).

If i THEN refresh the page, I see the new image, and if I then edit and update the image from then on, it works good, but the FIRST time is always the problem. I always have to do manual page refresh after updating the content.

My ajax:

$.ajax({
    type: "POST",
    async: true,
    url: vkrwps_admin.ajax_url,
    data: {
        action: 'EDIT_PROD',
        sv: sv,
        preload: vkrwps_admin.preloader
    },
    cache: false,
    beforeSend: function() {
        $('div.mule').html(u);
    },
    success: function(response) {
        $('div.mule').html(response);
        // call chosen on select
        $('select').chosen({
            // placeholder_text: "Choose a product..."
            'disable_search': true
        });
        // $('select.dropsearch').val(4).trigger('change');
    },
    complete: function() {
        // $('select.dropsearch').one().val(cf).trigger('change');
    }
});

I also tried putting the following on top of the script, but didn't help:

$.ajaxSetup({ cache: false });

score 3 · Answer 1 · edited May 23 '17 at 12:14

3

Try like this:

$.ajaxSetup({
    type: 'POST',
    headers: { "cache-control": "no-cache" }
});

You can find more solution in the question.

edited May 23 '17 at 12:14

Community

1
1

answered Mar 29 '14 at 20:41

goker

2,690
22
20

score 1 · Accepted Answer · answered Mar 29 '14 at 20:42

1

It's not the response of the ajax all that needs cache busting, it's the image, and it's updated on the server, but you're still loading the same URL, so it doesn't update on the clientside.

Try adding a random querystring to the images to load the images again, in the ajax success function do

       success: function(response){
            var r = (new Date()).getTime();

            $('div.mule').html(response).find('img').prop('src', function(_, src) {
                 return src + '?v=' + r;
            });

            $('select').chosen({
                // placeholder_text: "Choose a product..."
                'disable_search': true
            }); 
            // $('select.dropsearch').val(4).trigger('change');
        },

answered Mar 29 '14 at 20:42

adeneo

312,895
29
395
388

Thanks. Why do you have the underscore `_` as the first argument of the `prop` callback function? – Ollicca Mindstorm Mar 29 '14 at 21:37
@OlliccaMindstorm - To get to the second argument, we need to actually have the first argument, which is an index, and it's not needed in the code, so I tend to just use the underscore to show that it's not in use, but something has to be typed there, so why not an underscore. Any character or variable name would do as well, it's just a habit. – adeneo Mar 29 '14 at 21:50

jquery ajax cache:false not working

2 Answers2