JS/AJAX browser caching issue

Question

Hey,

I am working on an eshop with a calculator to calculate your loan. I need some fresh insight on this... imagine this situation:

1. User clicks on one of the buttons it will do a POST request (jQuery) and fill the required data.
2. User clicks add to cart and goes to cart
3. User clicks back button (browser)

Page is loading, server is filling the data in the calculator (default), BUT after its done, browser fills the JS data from cache and a funny thing happens. The data gets combined and when user adds the product to his cart he will get wrong, but valid price. Valid part is what server fills and the rest comes from cache.

I have tried using meta tags to prevent caching, I have told jquery to not cache the POST request and even in my responder, I have multiple headers that say - DO NOT CACHE. Yet still the POST data gets cached and I have no idea how to turn it off or refresh it or whatever... When I look at the headers that come back with the json data, header expires is set to year 2099, even though I have said it should be a year from past. Apart from that, I really dont know what could be causing this issue.

Here are the headers set in responder and what gets back:

 header("Expires: Mon, 26 Jul 1999 05:00:00 GMT" );
 header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
 header("Cache-Control: no-cache, must-revalidate" );
 header("Pragma: no-cache" );
 header("Content-type: text/x-json");

This gets back (from firebug):

    Date         Fri, 17 Sep 2010 08:39:38 GMT
    X-Powered-By PHP/5.1.6
    Connection Keep-Alive
    Content-Length 126
    Pragma         no-cache
    Last-Modified Fri, 17 Sep 2010 08:39:38GMT
    Server         Apache
    Content-Type text/x-json
    Cache-Control no-cache, must-revalidate
    Expires         Mon, 26 Jul 2099 05:00:00 GMT

Note: when I disable cache in browser preferences it works like a charm.

Any ideas are welcome!

Edit:

I have tried the dummy few hours before, but that doesnt solve it. To put it simple the whole problem is that when user clicks back button, the page wont refresh, but its read from cache, or at least the data that came from ajax are cached and get filled.

So basically I need to refresh the page in a smart way when user clicks back button. Note that cookies are not an option, because (maybe a small percentage, but still) some people dont have cookies allowed.

Answer 1

Add a dummy parameter to all your ajax queries '&t='+new Date().getTime(); This will ensure that a fresh request is sent every time.

Answer 2

If you want to handle back/forward buttons, one way is to use bbq plugin for jQuery, which is capable of modifying the # part of the url.

Thus you will be able to hook up to back/forward events and have complete control over what's executed and when, firing whichever Ajax requests you need.

It means though that you'll have to change the concept of your page flow - no direct posting to the server, only via ajax, + client side rendering via some template mechanism.

This is somewhat of emerging trend, examples being google with their instant search.

Answer 3

Solve it some with a little hack, since it looks like pure browser issue.