$.getJSON returning cached data in IE8

Jqueryasp.net MvcInternet Explorer-8Getjson

Jquery Problem Overview


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?

Jquery Solutions


Solution 1 - Jquery

This is how it worked for me...

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

Solution 2 - Jquery

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

Solution 3 - Jquery

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.

Solution 4 - Jquery

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

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

Solution 5 - Jquery

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

Solution 6 - Jquery

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 )

Solution 7 - Jquery

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 !

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndrew HarryView Question on Stackoverflow
Solution 1 - JqueryJitesh PatilView Answer on Stackoverflow
Solution 2 - JqueryNicoView Answer on Stackoverflow
Solution 3 - JqueryAndrew HarryView Answer on Stackoverflow
Solution 4 - JqueryGuyView Answer on Stackoverflow
Solution 5 - JqueryJoshView Answer on Stackoverflow
Solution 6 - JqueryKent FredricView Answer on Stackoverflow
Solution 7 - JquerystadjaView Answer on Stackoverflow