Jquery.get() not working in IE8/9. Won't load cached pages 304 not modified

Question

• Code Igniter version '2.0.3'
• Jquery 1.7
• Jquery History plugin

I have a CodeIgniter app that I've built in an ajax fashion. I have a function as follows:

$(document).on('click','.ajax_link',function(e){
    //Stop the normal href action
    e.preventDefault();

    //Grab the destination URL
    var new_url = $(this).attr('href')
    
    //Grab the content via ajax and pass it to the history change function
    $.get(base_url+new_url,function(data){
        History.pushState({
            content:data.content,
            url:data.url
        }, data.title, data.url);
        //Refresh some site variables
        refresh();
    },'json');
});

All it does it captures clicks on anchor elements with a class of ajax_link and sends the response to a function that handles the placement of that response data into the page.

This works in Chrome and FF. I click the link, jQuery makes the get request, I get back a JSON object and my history.pushState() function injects some of the json data into my page.

The problem I have is in IE8. Essentially what's happening is when I first open the app, the links work but they only work once. The second time I click a link it:

• Does the ajax GET
• Receives a response of 304 (Not Modified)
• Doesn't call the jQuery.get() callback function and therefore stops dead.

If I clear the cache it works again. So my assumption is that IE is doing the get request, but then it sees that it's already requested that exact same file in the past... and so stops the process entirely.

Does anybody know of a solution to this? I have had a look for mentions of 304 errors and errors with ajax and caching in IE but have not found a problem identical to mine just yet.

Any help much appreciated

(Tested on Windows Virtual Machine IE8, and IE 8 Mode in Internet Explorer 9)

Solved

Just needed to add the following code to my document.ready function and the issue disappeared.

$.ajaxSetup ({cache: false});

Tergal

Answer 1

Change this line:

var new_url = $(this).attr('href')

To this:

var new_url = $(this).attr('href') + '?' + Math.random();

This is called a "CacheBuster" and effectively creates a url similar to:

"website.com/page.html?1241233"

That random number will be different for every click of ".ajax_link" so IE will think its a new page and get it properly.

Septavalent

Thanks for your answer, sorry it took me so long to accept it. This was indeed the solution I needed. – Tergal

see also: #1014137 – Mailbox

Answer 2

We had an issue with IE(and Opera) doesn't like "application/json", where we have to render the response as "text/plain".

Jodijodie

thanks for your suggestion. I've managed to solve the issue by placing the following in my document.ready function: $.ajaxSetup ({cache: false}); – Tergal