Internet Explorer Caching Ajax... Works Fine in Other Browsers

Question

The problem: I am using Jquery UI tabs. The tabs display data that is stored in a database. Lets say the tabs are on home.com. In order to edit data in the database, you are taken to a new page where you can edit the data (e.g home.com/edit). Once you go back to home.com the new data should be displayed. This is the case in google chrome and firefox, but not in Internet explorer.

The weirdness: I can set $.ajaxSetup({cache:false}); and now the data is reloaded. Which makes me think it is an ajax issue with internet explorer (ignoring get requests). The trouble is that I don't want the cache to be set to false. I only want the tab to load once when the tab is click(styles, javascript, data, etc. do not need to be reloaded.). i.e. the tab should only be reloaded when you go to a different page and then come back, not each time you click the tab.

Also, When all of the IE windows are closed, and then navigate back to home.com, the updated data is displayed. Data is being refreshed on the site, but just not on pages where ajax calls are made. It seems like the behavior should be that ajax Get requests that are made should be ignored unless the whole page is refreshed, but the behavior appears to be that ajax Get requests are ignored unless the session is refreshed.

Hope that makes sense. Any help is greatly appreciated!

Here is an example of what the code would look like: html:

<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true'> List All </a></li>
</ul>
</div>

Javascript:

$("#tabs").tabs();

Switching between tabs should cache, but reloading the page should reload the tabs as well.

Hi David, I added some basic code, but since everything works in other browsers, and works when shutting off the cache in IE, this appears to be a funkiness with IE and caching ajax calls. — TigerBear, Sep 18 '13 at 23:52
@cpaloa, I am too tired. here 2.35 - Have deleted my moronic answer also. Sorry. — davidkonrad, Sep 19 '13 at 00:35
No Worries, any help is appreciated. I figured out the answer but can't answer my own questions within 8 hours of posting a question due to me being a new user. I will add the solution tomorrow. It turns out to be an easy solution: instead of letting jquery add a timestamp on the client side, add the timestamp on the server side. I think my question was a little too wordy and hard to follow. — TigerBear, Sep 19 '13 at 00:54
You can also set `cache: false` per `.ajax()` basis, so you can set one call to use `cache: false` and other with cache on. — JofryHS, Sep 19 '13 at 01:29
Thanks for the response. The problem with this is that it still wont cache the results on the page. I want the ajax requests to be cached, but when I refresh the page, or go away and come back, I want the ajax requests to be renewed. — TigerBear, Sep 19 '13 at 16:16

score 2 · Accepted Answer · answered Sep 19 '13 at 16:14

Got it figured out!

Most information out there says to either use Jquery:

$.ajaxSetup({cache:false});

Or html header

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

The problem is that both of these get ride of caching altogether. In my situation I only wanted the ajax caching off, and only on page reloads, not within the page.

$.ajaxSetup({cache:false}); will add a timestamp to the ajax get url. The trouble is that each time you click the tab, a new timestamp is added, making IE think it's a new URL, and reloading all of the information.

Solution: Add the timestamp to the server side. This way each time the page is reloaded and the server is contacted, there is a new timestamp. But when you are clicking around on the client side, IE doesn't reload the url since it is the same and only changes on page reloads/navigating away and back.

php:

$time = time();
$tabs = "<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true&timeStamp=" . $time . "'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true&timeStamp=" . $time . "'> List All </a>    </li>
</ul>
</div>"

So, for ajax requests that you only want loaded once per page refresh/navigation, use server side timestamp, for ajax requests that you never want cached, use the jquery client side timestamp.

Internet Explorer Caching Ajax... Works Fine in Other Browsers

1 Answers1