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

Javascript Problem Overview

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.

Resubmit POST body dialog box

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.

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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)

Solution 3 - Javascript

This works too:

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

Solution 4 - Javascript

This worked for me.

window.location = window.location.pathname;

Tested on

Chrome 44.0.2403
IE edge
Firefox 39.0

Solution 5 - Javascript

Use

RefreshForm.submit();

instead of

document.location.reload(true);

Solution 6 - Javascript

This can be solved also with POST/REDIRECT/GET pattern.
Which is more elegant:
https://stackoverflow.com/questions/570015/how-do-i-reload-a-page-without-a-postdata-warning-in-javascript/570069#570069

Solution 7 - Javascript

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();

Solution 8 - Javascript

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!

Solution 9 - Javascript

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>

Solution 10 - Javascript

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.

Solution 11 - Javascript

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.

Solution 12 - Javascript

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);

Solution 13 - Javascript

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.

Solution 14 - Javascript

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Scott Mitchell	View Question on Stackoverflow
Solution 1 - Javascript	peaceslp	View Answer on Stackoverflow
Solution 2 - Javascript	Daniel Doezema	View Answer on Stackoverflow
Solution 3 - Javascript	KF Web Development	View Answer on Stackoverflow
Solution 4 - Javascript	A Web-Developer	View Answer on Stackoverflow
Solution 5 - Javascript	Rajendra Prasad Das	View Answer on Stackoverflow
Solution 6 - Javascript	trante	View Answer on Stackoverflow
Solution 7 - Javascript	Tiberiu-Ionuț Stan	View Answer on Stackoverflow
Solution 8 - Javascript	Stephen	View Answer on Stackoverflow
Solution 9 - Javascript	Juan Mendes	View Answer on Stackoverflow
Solution 10 - Javascript	PodTech.io	View Answer on Stackoverflow
Solution 11 - Javascript	Sheo Dayal Singh	View Answer on Stackoverflow
Solution 12 - Javascript	Kaster	View Answer on Stackoverflow
Solution 13 - Javascript	dsummersl	View Answer on Stackoverflow
Solution 14 - Javascript	Prasanna	View Answer on Stackoverflow