81

I am using getJSON to fetch the results from server side but facing browser cache problems. I want the cache to be false. I tried using this just before my getJSON call.

 $.ajaxSetup({
                cache: false
            })

But I am not getting the expected results. It still shows the old results.

I also identified some other solutions such as using .ajax but I really don't want to use that.

brasofilo
  • 23,940
  • 15
  • 86
  • 168
Abhinav
  • 951
  • 2
  • 10
  • 17

3 Answers3

129

Your code just needs a trigger for it to be enabled.

This will allow you to disable cache in all future ajax

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});

Hope it helps :)

bonesnatch
  • 1,432
  • 1
  • 10
  • 11
  • 7
    This sets it globally, which is bad and can affect other ajax calls in your program which **do** need caching – vsync Jan 12 '15 at 16:42
  • @helloChris - here's a good explanation from jQuery "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute." [READ MORE ABOUT THE API](https://learn.jquery.com/using-jquery-core/document-ready/) – bonesnatch Jul 24 '15 at 03:34
  • 7
    @bonesnatch Most jQuery code would need that, right, but that setting has nothing to do with the DOM. The document could be in any state when you make that setting and it wouldn't make a difference, as far as I can tell. There's no page manipulation. – chris Jul 24 '15 at 15:48
  • Why does it need a trigger? Please explain why it doesn't work the way the original poster used it? – Rune Jeppesen Nov 04 '15 at 15:44
  • 2
    More esthetic way in usage; $.ajaxSettings.cache = false; – Mustafa Çakıroğlu Feb 15 '16 at 12:48
84

You can use either this, that will disable cache globally:

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});

or that, instead of $.getJSON, to disable the cache just for such request:

$.ajax({
    cache: false,
    url: "/path/to.json",
    dataType: "json",
    success: function(data) {
        ...
    }
});
semente
  • 6,321
  • 3
  • 30
  • 35
51

semente's and bonesnatch's answers are correct, but if you want to use $.getJSON and elsewhere take advantage of it's caching (you don't want to set the cache to false for all calls), but you want to bust the cache just for a single call, you can inject a timestamp into data property of $.getJSON(). By adding a unique value to the query string of the request, the request will always be unique and not be cached by the browser - you will always get the latest data.

Long version:

var ts = new Date().getTime();
var data = {_: ts};
var url = '/some/path.json';

$.getJSON(url, data);

All in one version:

$.getJSON('/some/path', {_: new Date().getTime()});

Both result in the following request:

/some/path.json?_=1439315011130

where the number at the end is the timestamp for the moment that the code is called and will therefore always be unique.

TriumphST
  • 1,084
  • 9
  • 16
  • 2
    I'd say by far and away the best solution to the problem asked. You don't need to change your javascript, no changing of global config just a simple extra parameter to pass into the function. – Chris Apr 04 '16 at 09:21
  • It's not a solution if you are using Azure CDN. Azure returns cached object if you send additional parameter – levye Jun 07 '19 at 11:43