To display the webpage again, Internet Explorer needs to resend - javascript

In my ASP.NET WebForms page I have a Modal window that pops up. The javascript code for displaying this modal window is as follows:
function OpenMailAddressWin(subscriberContactRelationGid, routeId, btn) {
window.showModalDialog("SubscriberSecondaryAddress.aspx" + BuildQueryStringValuesForSubscriber(subscriberContactRelationGid, routeId, returntxtReceiptDate().value), this, strWindowFeatures + ";scroll:no;dialogWidth:442px;dialogHeight:350px");
location.reload(true);
}
After the modal window is closed I need to refresh the parent page (hence the location.reload(true); statement at the end) in order for alterations made in the modal window to take affect.
Now the thing is that sometimes (not every time, infuriatingly) when I close this modal window I get a warning popup which says:
" To display the webpage again, Internet Explorer needs to resend the information you've recently submitted.
If you were making a purchase, you should click Cancel to avoid a duplicate transaction. Otherwise, click Retry to display the webpage again."
Any ideas why this is happening?

This is the double-submit problem in browsers.
When a page is loaded using POST request and you try to reload the page using location.reload(true);, the browser needs to send another POST request to the server and this may cause problems as POST is supposed to change state on the server. Therefore, the browser needs confirmation from the user. To solve this problem, we usually use POST-REDIRECT-GET pattern.
In your case, just simply using location.href = location.href should solve the problem as this will reload the page using GET.

This occurs when you try to return view(Model) from your POST request. Actually you cannot return a view from POST request because returning a view is supposed to be a GET operation and it must be done under GET request.
So after posting your data successfully and saving the data in database , you have to use ReturnToAction in your controller and return your final view from that action method.
Also If you want to refresh your page, you must use location.href = location.href instead of window.reload(), because location.href will get the data through GET request.

You can create a setTimeout function like this.
This will not give you any
setTimeout(function () {
window.parent.location.reload();
}, 100);

The Alert Message shows when refreshing a page in IE by using
That works... When you want to refresh the parent page.
This might be a valid soultion:
window.opener.location.href = window.opener.location.href;

I faced the same problem while calling modal window.
I removed location.reload and just returned true value from the function.
This solved my problem.

In my case I had something totally unrelated reloading the page, someone put some javascript code to reload the page in case of resize and it was always being triggered on document.ready, making it do the post request twice, so if none of the solutions here work just make sure that there isn't some random javascript reloading the page without you knowing about it, may be useful press F12 and check the network tab to see if something unexpected is being called.

Related

Opening new tab programmatically without refreshing referring page?

I have a page loaded via a POST request which opens another tab programmatically like this:
Object.assign(document.createElement("a"),
{ target: "_blank", href: "foo.html"}).click();
However, what happens is that in addition to opening the new tab, it also refreshes the original page, but it does so using a GET request instead of a POST request, which means I have lost all the POST parameters sent to the original page.
Is there any way to open the new tab without refreshing the referring page?
As Keith wrote earlier:
The current code you are showing won't cause the current page to refresh,. I'm assuming your running this code on a Form, it's the form submitting that causes the refresh not this. You can use event.preventDefault on your form to stop that.
This was indeed my problem, and calling event.preventDefault() solved it. Thanks, Keith!
You can use the window.open API for this (https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Just call it like this window.open('foo.html', '_blank');

Popup displaying on refresh

I have a form, with a code to show a popup when I press a create/edit link. Now when I do a page refresh, I get the following popup
I have managed to stop the popup from appearing when Retry is pressed, by handling it on the code behind of my aspx, but when Cancel is pressed, the page blinks (I guess it renders again?) and the popup is shown.
It doesn't go back to the server. It just goes to the javascript function that displays the popup, and shows it.
It should be noted at this point that this popup is just a <div> which can be shown or hidden.The default property of this <div> is hidden.
Please help me solve this issue and also explain why this is happening. I haven't been able to find anything on the internet explaining this issue.
When submitting a form, content may be sent with either POST or GET.
Sending with GET appends values to the address defining what webpage you are on. It could look like this:
www.domain.tld/page?value1=apple&value2=banana
Sending with POST sends the value in a hidden field that the server receives.
Clicking "Retry" will load the website with the information currently held within the POST field. Clicking cancel should display the address you are heading to without the POST content.
I hope this answers your question. If not, is there any way for you to show the piece of code that handles the POST data?
The browser saves the data in the form when you submit it, and when you refresh the page, the browser attempts to send this data again. The popup is a warning from the browser that this is about to happen, which is important since the form could be on a shopping site, so resending the data would result in accidentally buying the same things multiple times.
To fix this, you can redirect to another page once the form has been submitted, or you can add code to reset the form so the data won't be sent again.
We should follow a best practice to solve this problem. Better have a look at this. When you press the cancel button, it simply load the previous page and values will be persisted.
My understanding so far is that when you press the cancel button, the values for the page is taken from the browser's cache. I cleared the cache to test this theory. The cache isn't just storing the values of the page but also the last server response received. In my case, the last server response was to show the the popup by calling my javascript function, along with the required values, which is what it did.
Now my work around to it was to make the closing button as a server command as well, so that the final response would be to hide the popup.
Please do let me know if there is something wrong in this explanation.

Disable page refresh

I need to prevent users from refreshing a page.
I have scripted in such a way that there is no 'forward' or 'backward' movement required.
However, if one refreshes the page, 'everything' starts from the beginning.
To save everything before page refresh and restore them after is not ideal.
In order to prevent page refresh, I could use an alert();, but there are chances that the user might neglect the warning.
Any other choices...???
JavaScript cannot prevent the user from leaving the page (refresh counts as leaving the page), as it would violate the user's... whatever... Anyway, it's not possible. (even if you try, the browser will have tools to easily bypass any script you may write).
But if you will use pushState / replaceState from HTML5 to visually store the state of your webapp (and set the server to serve it from all those urls), you can navigate the user to the right place of an app even after refresh.
There is no way to prevent the user from refreshing the page. If you do not require that much data to be preserved, you can put in the URL (site.com/page.php?sort=2&x=3&y=4).
If you need a lot of data, you can only hope the user doesn't refresh the page. One way would be to, as you noted, display a dialog.
Oh, guess you could also use AJAX to store data server side and serve page to the user considering it's last state.
The best thing you can do is to ask for a confirmation by means of the window.onBeforeUnload event handler.
window.addEventListener('beforeUnload', function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
});
Note that the handler function should assign a string value to the returnValue property of the Event object and return the same string.
For more information see MDN WindowEventHandlers.onbeforeunload.

How do you break out of frames without breaking the browser's back button?

A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.

Back Button and Refresh with AJAX

I need a solution for the page refresh and the back button when using AJAX.
I'm using simple javascript for the AJAX implementation.
If anybody could send a code snippet I would be very grateful.
If you're using jQuery, there's the history plugin.
Here's a solution that I've used in some of my pages. Add this to pages that changes are made at.
window.onbeforeunload = function() {
window.name = "reloader";
}
this triggers when you leave those pages. You can also trigger it if there were changes made. So that it won't unnecessarily reload the page that needs reloading.
Then on pages that you want to get reloaded on after a the browser "back" use.
if (window.name == "reloader") {
window.name = "no";
location.reload();
}
this will trigger a reload on the page you need reloading to.
essentially, you need to use & monitor the hash portion of the url...
http://.../path?parms#hashpart
Whan you change the hash, iirc window.location.hash , it won't reload the page, but your ajax can monitor, and respond to it.
The onbeforeunload event can be useful to guard against refreshing but it fires if you navigate away or refresh. If you require that users login to the app you can always show a generic message advising against navigating away and refreshing. If users click your app log out button set a var to disable the warning. Could probably also make a 'Close' button that does the same thing.
Try PathJS it does not require jQuery or any other additional lib.

Categories