Solution- $.get ajax call does not work on the second time(IE)

Here’s the situation, you’re building a modern web application with all the AJAX-ey goodness users now expect, when suddenly you realize that some of your AJAX calls are not returning current data in Internet Explorer. If you’re like me, this usually dawns on you toward the end of a project while you’re testing because, well, what self respecting developer uses IE on a daily basis?

This can be a frustrating issue to debug. It’s possible though that this is a very common problem. In fact, it cropped up in my office three times over the past 2 weeks!

The Symptoms

• Requests work just fine the first time you try
• As data is modified, you realize that you’re still seeing old results
• Everything appears to work correctly in other browsers
• You’re slowly going insane

Debugging

When an issue of this nature pops up I usually start the investigation by using FireBug in Firefox. Using this invaluable tool I check to make sure the requests are being made properly, check for any response issues, and so forth.

With Internet Explorer, the development tools are so poor you can barely debug CSS issues, let alone javascript problems. It’s then that I turn to Fiddler, the fantastic http traffic inspector. When you fire up Fiddler and start putting some requests through using a non IE browser you’ll see the request get made and the response come back without a problem. When you do the same with Internet Explorer you’ll notice something strange happen, or rather, not happening. The requests are not being made at all, they are being totally ignored by Internet Explorer.

The Issue

What is happening is that you’re likely making a GET request to a web service for your AJAX call. Internet Explorer, in its wisdom, will automatically cache responses from GET requests while other browsers will let you decide if you’d like to cache the result or not. Once IE has successfully made a GET request, it will no longer even make that AJAX call until the cache expires on that object.

The Solution(s)

Fortunately, fixing the issue is easier than identifying it. There are several ways to prevent AJAX requests from being cached.

POST

One option is to simply use POST requests instead of GET requests in your application. It’s usually a minor change to switch over from GET to POST on both the client and server side.

Cache Buster

Another option is to use a “Cache Buster” parameter in your request. A cache-buster is a dynamic parameter that you append to a request which makes each request unique, most commonly a random number or the current date/time ticks. This does not prevent the browser from caching the response however, it only prevents it from reusing the cached value. For example:

var myRequestURL = '/get/somefunction?buster='+new Date().getTime();

Response Headers

You can also prevent caching by sending additional headers along with your response. By specifying the “Cache-Control” header with a value of “no-cache,no-store” and returning it with the web service response you can instruct the browser not to cache the result. For example in C#:

HttpContext.Current.Response.AddHeader("Cache-Control","no-cache,no-store");

jQuery

Finally, if you’re using jQuery, you can specify that you don’t want to cache the response from your AJAX requests either across the board using the $.ajaxSetup() method or on a per request basis.

//Disbable cache for all jQuery AJAX requests $.ajaxSetup({ cache: false });

-OR-

//Disable cache for just this request $.ajax({ cache: false, //other options... });

Final Comments

There are reasons why you might want to cache the response for GET requests. For instance, a high traffic application which gets your profile name on each page load. That information doesn’t change very often so there is no need to make a fresh request every time. There are also some who will say you should not use a POST request for every AJAX call as I’ve suggested. As always, your specific application needs will dictate how you proceed and one solution does not fit all.