CODEWITHSUNDEEP
jqueryajax
Ollicca Mindstorm
Ollicca Mindstorm

Reputation: 608

jquery ajax cache:false not working

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 });

Upvotes: 1

Views: 7720

Answers (2)

adeneo
adeneo

Reputation: 318192

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');
        },

Upvotes: 1

goker
goker

Reputation: 2720

Try like this:

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

You can find more solution in the question.

Upvotes: 3

Related Questions