0

I have an HTML5 page that displays not much more than just a list with names a simple form in which the user can fill out their name. The submit button calls as action a PHP file that adds/removes the name to/from the list, and then redirects (by use of header()) back to the HTML file that called the PHP file.

In Google Chrome, after the user hits the submit button he immediately sees that is name was properly added/removed to/from the list with names.

In IE, Firefox (and according to someone who tested for me also on Android and in Safari), after hitting the submit button, the previous version of the html file are shown, without the changes that have just been made to it by the code in the PHP file. Even after reloading and even after clearing the cache, which I tried in IE and Firefox, still the old version is shown. While at the same time, loading the file in Chrome does show the altered (=current) version. Only after maybe 20 minutes or so, it is finally possible to load the updated html file in IE and FF. Even reloading with JS window.location.reload(true);, just to see if that at least forces the updated version, does not update the page (it does reload, but still shows the unaltered version).

I searched the internet for about 6 hours, but found no solution, or even anyone else reporting this problem. Adding META HTTP-EQUIV ... is not valid with html5, and indeed (eventually tried it anyway) does not solve anything. I am not using a cache manifest (never used it). So the page should not be cached, but as I mentioned, even clearing the cache and reloading does not give the new version of the page (not even after restarting IE/FF).

I am still learning, only started designing web pages last year. So, I (clearly) don't exactly know all that is going on between the server and the browser. So this problem seems really odd to me, and I am very eager to find out what is going on here. Also, it is vital for this page to download and display the current version from the server, because users need to see that their name is added/removed to/from the list.

Here is the outline (sorry, probably not the right English word) of the html page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title text</title>
    <link rel='stylesheet' type='text/css' href='corStylesheet.css' />
    <meta name='robots' content='noindex,nofollow' />
  </head>
  <body>
    [content here]
    <script src='corJavaScript.js'> // (some of the js did not work when place in head)
    </script>
  </body>
</html>

So, I basically have two questions here: 1. What is going on here? i.e. how is it this impossible to load the current version of the html file? 2. What can I do to force the current version to be downloaded from the server and shown?

Community
  • 1
  • 1
ChrisKras
  • 1

3 Answers3

0

If you wish to force the browser to reload the page every time you can set the header so that no caching of the file is allowed.

Either you can do it via PHP (read more about it here);

header("Cache-Control: no-cache, must-revalidate");

Or you can set it directly in HTML:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

EDIT: Just found an extremely good post about how to set this in different languages; How to control web page caching, across all browsers?

Community
  • 1
  • 1
Sander
  • 1,196
  • 1
  • 13
  • 24
0

In your redirect in the PHP side you can add some number unix time or micro unix time to make the browser think it is new page:

header('location: yourhtmlfile.html?'.microtime());
talsibony
  • 7,378
  • 5
  • 42
  • 41
0

My (Javascript) approach is, appending a random string to the requested URL.

The resource is then considered a new resource, bypassing the browsers cache.

This also works when you want to reload an external resource from an address where you can't add/modify response headers (like on a 3rd party CDN).

var currentUrl = document.URL;
if (currentUrl.search('?') === -1) {
    window.location.href = currentUrl + '?' + Math.floor(Math.random() * 11);
} else {
    window.location.href = currentUrl + '&' + Math.floor(Math.random() * 11);
}
Daniel W.
  • 26,503
  • 9
  • 78
  • 128
  • This works, but with currentUrl.search('\\?') (dubble backslash before the question mark). Also used this idea with the header function in my php file now. – ChrisKras Aug 21 '14 at 19:50
  • @ChrisKras Wasn't aware of the slashes must be there. You're welcome – Daniel W. Aug 21 '14 at 20:36