Question

I’ve set up a basic script which loads a random quote into a web page, pulling the quote from a list in a php file. It works fine in Firefox and Safari, but in Internet Explorer users always see the same quote and refreshing the page will not change the quote.

I’ve narrowed this down to a cache issue in IE, as when I go into F12 Developer tools in IE 9 and set cache to always refresh from server, the issue goes away. However, I want visitors to the site to see a changing quote.

I have tried adding this to the page header with no luck:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

I also saw this question: How do I stop js files being cached in IE? and I added a timestamp to the .js file which holds the script but this didn’t change anything.

Anything else I might be missing? The .js file is very simple:

$j(document).ready(function() {
$j("#quoteContainer").load("/quote_generator.php", "quote=emotion");
});

The quote generator, simplified, gets the type of quote (emotion in this case) and displays it:

$quotes[] = 'emotion quote.';
$quotes[] = 'emotion quote2.';
$random_number = rand(0,count($quotes)-1);
echo $quotes[$random_number]; 

Would it possibly be caching the PHP file or its output also? Certainly when I adjust the php file the changes don’t show until I clear the IE cache?

Answer 1

Maybe give it a nonce:

$j(document).ready(function() {
   $j("#quoteContainer").load("/quote_generator.php", {quote: "emotion", nonce: new Date().getTime()});
});

(The timestamp isn’t the best nonce in the world but it’s an easy example.) Your server code will ignore the parameter but it’ll make the URL seem unique to the browser cache.

edit — sorry it’s been a while since I’ve used .load(); if you want to stick with HTTP “GET” requests, you have to give the args as a string (which, imo, is kind-of a questionable API design on jQuery’s part but whatever):

$j(document).ready(function() {
   $j("#quoteContainer").load("/quote_generator.php", "quote=emotion&nonce=" + new Date().getTime());
});