CODEWITHSUNDEEP
c#jqueryinternet-explorerasp.net-mvc-4
idipous
idipous

Reputation: 2910

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

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?

Upvotes: 13

Views: 7791

Answers (4)

zamber
zamber

Reputation: 938

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).

Upvotes: 0

VIDesignz
VIDesignz

Reputation: 4783

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
        }

    }); 

});

Upvotes: 0

hairbo
hairbo

Reputation: 3153

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. (-;

Upvotes: 2

idipous
idipous

Reputation: 2910

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.

Upvotes: 38

Related Questions