CODEWITHSUNDEEP
jqueryajaxcachingxmlhttprequestclear-cache
sasklacz
sasklacz

Reputation: 3628

Force ajax call to clear cache

I have a cms in which I can change positions of objects. After each position change ajax call updates the whole list of objects. But unfortunately some data is stored in cache and no changes are visible. Is there a way to force clearing cache with javascript/request/other ? I've tried 'cache: false' in $.ajax but it's not working.

Here's a sample page :

http://ntt.vipserv.org/manage/playforward

And my js :

$(".object-position").livequery("change", function() {
    $("#objects-list input").attr('disabled', true);
    var action = $(this).attr('name');
    var position = $(this).attr('value');
    var id = $(this).attr("id");
    var model = id.split("-")[0];
    var object_id = id.split("-")[1];

    $("#loader").show();
    $("#loader").fadeIn(200);

    $.ajax({
        type: "POST",
        async: true,
        url: "/manage/update_position/",
        data: "action=" + action + "&model=" + model + "&object_id=" + object_id + "&position=" + position,
        dataType: "json",
        success: function(data){
            $("#loader").fadeOut("fast", function () {
                $("#loader").hide();
            });
            $("objects-list").html(data["html"]);
            $("#message").show();
            $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
            setTimeout(function(){
                $("#message").fadeOut("slow", function () {
                    $("#message").hide();
                });
            }, 1500); 
        }
    });
    $("#objects-list input").attr("disabled", false);
    return false;
});

Upvotes: 7

Views: 67368

Answers (3)

remi
remi

Reputation: 1303

Just replace

url: "/manage/update_position/",

with

url: "/manage/update_position/?nocache="+Math.random(),

to force reloading the page not using the browser’s cache.

Upvotes: 7

Ken Redler
Ken Redler

Reputation: 23943

You have

$("objects-list").html(data["html"]);

Try this instead:

$(".objects-list").html(data["html"]); // forgot leading dot?

Also, it looks like you're trying to replace the contents of the .objects-list table with some html that includes the <table> element itself. So you'd have <table...><table...>, etc., after the .html() content replacement.

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237865

What cache: false does is to add the time to the request data, so each request is effectively unique and therefore bypasses the browser's cache. I wonder if the fact that you are using a data string rather than an object is causing problems here. Try using an object instead:

$.ajax({
    type: "POST",
    async: true,
    url: "/manage/update_position/",
    data: {
        "action": action.
        "model": model,
        "object_id": object_id,
        "position": position
    },
    cache: false,
    dataType: "json",
    success: function(data){
        //[snip]
    }
});

Upvotes: 20

Related Questions