"location.reload()" loses POST/SESSION data? (F5 / Ctrl+R keeps data?)

Question

I want to create a button to reload a page without losing $_POST data and $_SESSION.
On the web, I found this piece of code:

onclick="document.location.reload();"

And here is the code of my button:

<a class="button" href="" style="font-size: 0.7em; padding: 5px 10px;" onclick="document.location.reload();">Recharger la page</a>

But when I click on the button, I lose $_POST data and $_SESSION.

If I try with the keyboard command Ctrl+R (Chrome) or F5 (Firefox, IE9), the browser is showing an alert to notify me that I'm again trying to submit form. If I accept, it works.

How can I reproduce this kind of browser-refresh with a JavaScript command? Or is the code of my button wrong?

Thank you very much for your help.

Gingrich

Answer 1

Try using

location.reload(true);

This will perform a "hard" refresh, not just rebuilding the DOM but also re-retrieving any resource from the server.

You can read more at the Mozilla Developer wiki.

Apparently, location.reload() is the equivalent of F5 in scripting, whilst Ctrl+F5 / Ctrl+R can be simulated using location.reload(true).

Also, as ThiefMaster mentioned, you're missing ;return false at the end of your onclick statement, or you should set the href to javascript:void 0^* to prevent the browser from following the link.

_{*Or any other piece of JavaScript that returns undefined}

Lollapalooza

When I use location.reload(true), browser is giving the alert to notify that I'm again trying to submit form. If I accept, it doesn't work. Is it due to the href=""? – Gingrich

That's because the browser will reload using exactly the same parameters and request method as it used when it loaded the page for the first time. If you don't want to repeat this, you could better first store the data in $_SESSION and then do a header("303 See Other") and a header("Location: $_SERVER['REQUEST_URI']") to reload the page with a GET request. – Lollapalooza

Thank you for your answer but ThiefMaster gave me the solution :) – Gingrich

location.reload(true) doesn't POST anything, GET request is used instead. – Zel

Answer 2

This should happen in any case as long as you are on the same location you POSTed to. However, it's common to redirect after a POST request to avoid exactly what you are trying to do.

The reason why your code doesn't work is the fact that href="" will cause a GET request to the current URL. Use href="#" to prevent it from loading a "new" page or add return false; at the end of your onclick="..." code.

Orthographize

When in press F5, in Firefox for instance, It works fine. I just want to find a way to do that with a javascript button ? – Gingrich

location.reload() should do the job as you can see on jsfiddle.net/ThiefMaster/thTyD (note that you must click "Run" first so the output pane was actually loaded via POST). – Orthographize

But my code above doesn't work… onclick="document.location.reload();". Is it due to the href=""? – Gingrich

Yes, you need to use href="#" or return false; at the end of your onclick. – Orthographize

href="#" always jumps to the top of the page. Try this link for instance.. That's really annoying. For this reason, I recommend using javascript:void 0 (or any JavaScript that returns undefined) instead. – Lollapalooza

Answer 3

The Ctrl + R refreshes the page and clears your cache. And I guess you're using Internet Explorer? Some other browsers behave like this when you hit Ctrl + F5, but not with Ctrl + R

Sources:
https://superuser.com/questions/205279/ctrlf5-vs-ctrlr-on-browsers
Browser issue in Ctrl-R

Luckin

I usually work in FF but I'm on a project wich demands to be cross-browsers :) – Gingrich