Reload browser window after POST without prompting user to resend POST data

Question

When a user visits my website there is a "Login" link on every page. Clicking this uses some JavaScript to show an overlay window where the user is prompted for their credentials. After entering these credentials an Ajax call is made to the web server to validate them; if they are valid, an authentication ticket cookie is sent back and the page is reloaded so that any content on the page that is specific to authenticated users or the (now) currently logged in user is displayed.

I am accomplishing the page reload via script using:

window.location.reload();

This works wonderfully for pages loaded via a GET request (the vast majority), but some pages use postback forms. So if a user goes to one of these pages, performs a postback, and then chooses to login, when the window.location.reload() script runs they are prompted with the dialog box asking if they want to resubmit the POST body.

I thought to get around this I could just tell the browser to reload the page, so I tried:

window.location.href = window.location.href;

But the browser doesn't take any action with the above statement, I presume because it's thinking the new URL is the same as the old. If I change the above to:

window.location.href = window.location.pathname;

It reloads the page, but I lose any querystring parameters.

My current workaround is sufficient, but not pretty - in short, I tack on a querystring parameter to the current window.location.href value and then assign that back to window.location.href by calling reloadPage("justLoggedIn"), where the reloadPage function is:

function reloadPage(querystringTackon) {
    var currentUrl = window.location.href;

    if (querystringTackon != null && querystringTackon.length > 0 && currentUrl.indexOf(querystringTackon) < 0) {
        if (currentUrl.indexOf("?") < 0)
            currentUrl += "?" + querystringTackon;
        else
            currentUrl += "&" + querystringTackon;
    }

    window.location.href = currentUrl;
}

This works, but it results in the URL being www.example.com/SomeFolder/SomePage.aspx?justLoggedIn, which seems tacky.

Is there a way in JavaScript to get it to do a GET reload and not prompt the user to resubmit the POST data? I need to make sure that any existing querystring parameters are not lost.

Answer 1

window.location.href = window.location.href;

Don't ask my why it works..but it does :).
Just the way the js engine interprets the logic I suppose.

Answer 2

What you probably need to do is redirect the user after the POST / Form Handler script has been ran.

In PHP this is done like so...

<?php
// ... Handle $_POST data, maybe insert it into a database.
// Ok, $_POST data has been handled, redirect the user
header('Location:success.php');
die();
?>

... this should allow you to refresh the page without getting that "Send Data Again" warning.

You can even redirect to the same page (if that's what you're posting to) as the POST variables will not be sent in the headers (and thus not be there to re-POST on refresh)

Answer 3

This works too:

window.location.href = window.location.pathname + window.location.search

Answer 4

This worked for me.

window.location = window.location.pathname;

Tested on

• Chrome 44.0.2403
• IE edge
• Firefox 39.0

Answer 5

Use

RefreshForm.submit(); 

instead of

document.location.reload(true); 

Answer 6

This can be solved also with POST/REDIRECT/GET pattern.
Which is more elegant:
How do I reload a page without a POSTDATA warning in Javascript?

Answer 7

I had the same problem as you.

Here's what I did (dynamically generated GET form with action set to location.href, hidden input with fresh value), and it seems to work in all browsers:

var elForm=document.createElement("form");
elForm.setAttribute("method", "get");
elForm.setAttribute("action", window.location.href);

var elInputHidden=document.createElement("input");
elInputHidden.setAttribute("type", "hidden");
elInputHidden.setAttribute("name", "r");
elInputHidden.setAttribute("value", new Date().getTime());
elForm.appendChild(elInputHidden);

if(window.location.href.indexOf("?")>=0)
{
    var _arrNameValue;
    var strRequestVars=window.location.href.substr(window.location.href.indexOf("?")+1);
    var _arrRequestVariablePairs=strRequestVars.split("&");
    for(var i=0; i<_arrRequestVariablePairs.length; i++)
    {
        _arrNameValue=_arrRequestVariablePairs[i].split("=");

        elInputHidden=document.createElement("input");
        elInputHidden.setAttribute("type", "hidden");
        elInputHidden.setAttribute("name", decodeURIComponent(_arrNameValue.shift()));
        elInputHidden.setAttribute("value", decodeURIComponent(_arrNameValue.join("=")));
        elForm.appendChild(elInputHidden);
    }
}

document.body.appendChild(elForm);
elForm.submit();

Answer 8

This is an older post, but I do have a better solution. Create a form containing all of your post values as hidden fields and give the form a name such as:

<form name="RefreshForm" method="post" action="http://yoursite/yourscript">
    <input type="hidden" name="postVariable" value="PostData">
</form>

Then all you need to do in your setTimeout is RefreshForm.submit();

Cheers!

Answer 9

You could try to create an empty form, method=get, and submitting it.

<form id='reloader' method='get' action="enter url here"> </form>
<script>
// to reload the page, try
document.getElementById('reloader').submit();
</script>

Answer 10

If you have hashes '#' in your URL, all the solutions here do not work. This is the only solution that worked for me.

var hrefa = window.location.href.split("#")[1];
var hrefb = window.location.href.split("#")[2];
window.location.href  = window.location.pathname +  window.location.search + '&x=x#' + hrefa + '#' + hrefb;

The URL has to be different for it to reload if you have a hash. The &x=x does that here. Just substitute this for something you can ignore. THis is abit of a hack, unable to find a better solution..

Tested in Firefox.

Answer 11

When we want to refresh the parent page from the child page without any prompt.

Here is the code:

window.opener.location.href = window.opener.location;

This simply refreshes the parent page without any prompt.

Answer 12

To reload opener window with all parameters (not all be sent with window.location.href method and method with form.submit() is maybe one step to late) i prefer to use window.history method.

window.opener.history.go(0);

Answer 13

You can take advantage of the HTML prompt to unload mechanism, by specifying no unload handler:

window.onbeforeunload = null;
window.location.replace(URL);

See the notes section of the WindowEventHandlers.onbeforeunload for more information.

Answer 14

This worked

<button onclick="window.location.href=window.location.href; return false;">Continue</button>

The reason it doesn't work without the return false; is that the button click would trigger a form submit. With an explicit return false on it, it doesn't do the form submit and just does the reload of the same page that was a result of a previous POST to that page.