$.getJSON returning cached data in IE8

Question

I'm playing around with ASP.net MVC and JQuery at the moment. I've come across behavour which doesn't seem to make sense.

I'm calling JQuery's $.getJSON function to populate some div's. The event is triggered on the $(document).ready event. This works perfectly.

There is a small AJAX.BeginForm which adds another value to be used when populating the divs. It calls the remote function correctly and upon success calls the original javascript function to repopulate the divs.

Here is the weird part: In FireFox and Chrome - Everything works. BUT In IE8 (Beta) this second call to the populate Div script (which calls the $.getJSON function) gets cached data and does not ask the server!

Hope this question makes sense: In a nut shell - Why is $.getJSON getting cached data? And why is it only effecting IE8?

Strangely, I see this bug not only in IE, but in Firefox as well. Disabling ajax caching in jquery helped me. — Josef Sábl, Sep 15 '10 at 13:40

score 107 · Answer 1 · edited Jul 26 '12 at 09:20

107

This is how it worked for me...

$.ajaxSetup({ cache: false });
$.getJSON("/MyQueryUrl",function(data,item) {
     // do stuff with callback data
     $.ajaxSetup({ cache: true });
   });

edited Jul 26 '12 at 09:20

Matt Handy

29,855
2
89
112

answered Dec 11 '08 at 00:16

Jitesh Patil

1,334
1
8
13

I was struggling with this problem and your solution gave a quick way to solve it. :) I have a question, do you know what options can be used for $.ajaxSetup? jQuery documentation does not provide details unfortunately... – Achimnol Jul 23 '09 at 07:09
1

The available options are identical to $.ajax See http://docs.jquery.com/Ajax/jQuery.ajax#options for more information – Dan Esparza Aug 11 '09 at 21:37
12

A little warning for the code above - it contains race condition. Because the call and its response are asynchronous, you should call `$.ajaxSetup({ cache: true });` right after the `getJSON()` and not in the callback. – sax Mar 10 '12 at 17:36

score 67 · Accepted Answer · answered Nov 05 '08 at 09:09

67

Just to let you know, Firefox and Chrome consider all Ajax request as non-cachable. IE (all versions) treat Ajax call just as other web request. That's why you see this behavior.
How to force IE to download data at each request:

As you said, use 'cache' or 'nocache' option in JQuery
Add a random parameter to the request (ugly, but works :))
On server side, set cachability (for example using an attribute, see below)

Code:

public class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext context)
    {
        context.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }
}

answered Nov 05 '08 at 09:09

Nico

13,320
6
32
33

1

This solution appeals to me. I really like the elegance of applying an attibute in MVC – Andrew Harry Nov 05 '08 at 23:40
1

There is an OutputCacheAttribute OOTB nowadays. – bzlm May 04 '09 at 21:42
1

@bzlm but this is easier to search for – Simon_Weaver Jun 24 '09 at 21:41
check out http://formatinternet.wordpress.com/2010/01/14/ie-cache-for-ajax-requests/ for a client side solution – Ivo Sep 22 '11 at 12:27
IE is trying to be different from any other browser, again :-( – Maksym Kozlenko Apr 13 '12 at 05:59
1

Actually, it is the other way around, but I agree as a developer IE requires patience :) – Nico Apr 22 '12 at 11:51
" Firefox and Chrome consider all Ajax request as non-cachable. IE (all versions) treat Ajax call just as other web request" - citation needed (please :) ) – Morgan T. Jun 01 '12 at 16:11
@MorganTiley - seconded. I don't think that's true. At least not in 2012 it's not. – Erik Reppen Jul 26 '12 at 22:01

Andrew Harry · Answer 3 · 2008-11-05T07:28:25.153

16

Thanks Kent for your answer. Using $.ajax('{ cache: no }'); worked perfectly. [edit]

Or at least I thought i did. Seems that the jquery $.getJSON isn't reading any changes made to the $.ajax object.

The solution that ended up working was to add a new parameter manually

var noCache = Date();
$.getJSON("/somepage/someaction", { "noCache": noCache }, Callback);

the date resolution is only to the minute; which effectively means this solution still caches for upto one minute. This is acceptable for my purposes.

edited Nov 05 '08 at 07:28

answered Nov 05 '08 at 04:35

Andrew Harry

13,773
18
67
102

9

var noCache = new Date().getTime(); //will give you to the ms – scunliffe Nov 05 '08 at 13:44
thanks Scunliffe! - i'm pretty new to javascript, ASP MVC has opened new horizons for me – Andrew Harry Nov 05 '08 at 23:39
You can also try something like Math.Random(). – Falkayn Sep 15 '09 at 01:44
@Falkayn - tough `Math.Random()` could be used, its results will be unknown and you might get the same number twice in a row (or more). using `new Date().getTime()` will make sure that it is never repeated. (unless you are able to go back in time ;) ) – Rafael Herscovici Jan 09 '13 at 14:33

score 11 · Answer 4 · answered Aug 13 '09 at 03:49

11

I solved this same problem by placing the following attribute on the Action in the Controller:

[OutputCache(Duration = 0, VaryByParam = "None")]

answered Aug 13 '09 at 03:49

Guy

65,082
97
254
325

Wonderful! Great to have alternatives (I chose this one). Thanks to all contributors! – Anders Juul Apr 12 '10 at 20:17
Works fine with Asp.Net MVC 4.0 – Mayank May 10 '16 at 16:56

score 4 · Answer 5 · answered May 11 '09 at 16:55

If you're using ASP.net MVC, consider adding an extension method to easily implement no caching like so:

    public static void NoCache(this HttpResponse Response)
    {
        Response.Cache.SetNoStore();
        Response.Cache.SetExpires(DateTime.MinValue);
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetValidUntilExpires(false);

        Response.Expires = -1;
        Response.ExpiresAbsolute = DateTime.MinValue;
        Response.AddHeader("Cache-Control", "no-cache");
        Response.AddHeader("Pragma", "no-cache");
    }

Nice idea - so you call this extension method on the server during the callback right? — Guy, Aug 12 '09 at 21:12

score 2 · Answer 6 · answered May 29 '12 at 07:44

2

Ready for THE answer ?

http://lestopher.tumblr.com/post/21742012438/if-youre-using-ie8-and-getjson

So, just add

jQuery.support.cors = true;

at the beginning of your script and BANG it works !

answered May 29 '12 at 07:44

stadja

56
6

score 2 · Answer 7 · answered Nov 05 '08 at 02:51

2

You may need to send a cache-breaker.

I would recommend using $.ajax( { cache: no }) just in case ( adds a random suffix to the get request)

( I tend to use $.ajax everywhere these days, more tuneable )

answered Nov 05 '08 at 02:51

Kent Fredric

56,416
14
107
150

Thanks for your answer!... i haven't tried it out yet. Will provide feed back shortly – Andrew Harry Nov 05 '08 at 02:53

$.getJSON returning cached data in IE8

7 Answers7

Linked