Jquery Ajax requests not working on IE 10 (due to cache)

Question

I would like to begin with this. I am fed up with IE. I have the code below:

$(function () {
$("#cal").on('click', "#forward", function () {
    $.ajax({
        url: "Home/Calendar?target=forward",
        type: "GET",
        success: function (result) {
            $("#cal").html(result);
        }
    });
  });
});

 $(function () {
$("#cal").on('click', "#backwards", function () {

    $.ajax({
        url: "Home/Calendar?target=backwards",
        type: "GET",
        success: function (result) {
            $("#cal").html(result);
        }
    });
});
});

It is an ajax call to a controller action in an C# MVC application. It just goes back and forth a calendar's months replacing the html. Now I know that you need to reattach the event due to the html() call and that is why I use on() with JQuery 1.7. I have used delegate() as well. In FF, Chrome it works as intended. In IE 10 it does not. I am at a loss. I knew that IE had issues with delegate in IE8 and with JQuery < 1.5 but this is not the case.

Does anyone know how to solve this?

does this help? http://stackoverflow.com/questions/4100872/jquery-code-not-working-in-ie?rq=1 — Axarydax, Mar 31 '13 at 14:50
nope, I have this code to a different file which I load with Scripts.Render("~Scripts/calendarJS.js") so it is not an issue with the type. Also I added the document load but still nothing — idipous, Mar 31 '13 at 14:58

score 38 · Accepted Answer · answered Mar 31 '13 at 15:11

I am answering the question just for future reference for other people. It seems that IE is caching AJAX requests for some reason I am unable to comprehend.

I noticed using the (surprisingly good) developer tools IE 10 provides that I was getting a 304 not modified response to my AJAX requests. This was not the case in Firefox or Chrome (200 was the response).

I added the cache: false option to my AXAJ JQuery functions and now it works as intended.

IE never seizes to amaze me.

score 2 · Answer 2 · answered Jun 26 '13 at 16:35

Brief addition, given what (little) I understand on the subject. Apparently, the XmlHttpRequest spec says that XHR GET commands can behave just like a standard web page retrieval (e.g. clicking on a regular old link), and therefore XHR GET commands can be cached. The IE team has chosen to adhere to this spec, while the other browser makers have not. While I can see some logic in this approach, I think those of us who work with XHR requests every day would emphatically say that we would prefer caching to be off by default, rather than on. (-;

score 0 · Answer 3 · answered Oct 18 '13 at 04:30

I ran into this a long long long time ago with IE... now I always make it a point now to write my ajax calls with a random trailing key/value pair.

I also add cache: false though I have found by itself it doesn't always do what it should (well, maybe its just IE not doing what it should)

This is how I set them up...

$('#trigger').submit( function(e){

    e.preventDefault();

    var randnum = Math.floor(Math.random()*1001); //magic starts here

    $.ajax({
        type: "POST",
        url: "folder/file.php",
        cache: false,
        data: "random=" + randnum, //pure magic
        success: function(){
            // do stuff here
        }

    }); 

});

score 0 · Answer 4 · answered Feb 25 '14 at 09:46

Got this issue too. It turns out that all of the fixes above will not work if the POST response has cache-control: max-age. The 1st request will fetch the data but after that all requests (even if you add a random attribute) will be 304'd.

In this case IE will not even ask the server if the content changed, it just assumes that if it has a max-age then there's no point in doing a request.

Moreover XHR specs say that 304's shouldn't pass any data so basically you get an empty response for a POST (just on IE 9 and 10).

Jquery Ajax requests not working on IE 10 (due to cache)

4 Answers4