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

Community · Accepted Answer · 2017-05-23 12:14:43Z

3

Try like this:

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

You can find more solution in the question.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Mar 29, 2014 at 20:41

goker

2,73023 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2014-03-29 20:42:46Z

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, 2014 at 20:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

Ollicca Mindstorm Over a year ago

Thanks. Why do you have the underscore _ as the first argument of the prop callback function?

adeneo Over a year ago

@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.

Collectives™ on Stack Overflow

jquery ajax cache:false not working

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related