3

I have a page that doesn't allow user to refresh the page by clicking browser refresh button or pressing F5. So I want to simulate 'form resubmission' in order to show prompt message.

can someone guide me an approach to implement it?

Is there any cross-browser solution available for that?

Gopal S Rathore
  • 9,885
  • 3
  • 30
  • 38
user44858
  • 135
  • 1
  • 2
  • 9
  • Did you write the web app, or did someone else write the app and you are using it? – jww Dec 26 '14 at 04:56
  • `$(window).on('beforeunload', function(){ return 'Are you sure you want to leave?'; });` – Umesh Sehta Dec 26 '14 at 04:59
  • Execute function before refresh [http://stackoverflow.com/questions/9308336/execute-function-before-refresh](http://stackoverflow.com/questions/9308336/execute-function-before-refresh) – Marlin Dec 26 '14 at 05:00
  • I'm developing web app. I tried onbeforeunload, but it doesn't work on Safari mobile – user44858 Dec 26 '14 at 06:05
  • You can refer to this answer: http://stackoverflow.com/a/3968038/1853444 – Nguyen Giang Dec 30 '14 at 08:17

4 Answers4

2

To refresh without getting the prompt the page must have been fetched using HTTP GET

Make the form have method="GET" instead of method="POST" (and fix server processes to work with this change as apropriate)

Alternatively cache the post data in a session and redirect to the display page using HTTP code 303 immediately after form submission.

If you want to cause the prompt, make the link that takes the user to the page into a submit button on a POST form. if a user arrives with a GET request have serve them a page having javascript that submits a form converting the request into a POST request.

Jasen
  • 11,837
  • 2
  • 30
  • 48
  • Hi @Jasen, What I want is to get the prompt message when user trying to refresh the page. Your solution seems to avoid the prompt message.? – user44858 Dec 26 '14 at 06:17
  • oops! I have added instructions on how to do what you want. – Jasen Dec 26 '14 at 06:24
  • `onBeforeUnload` will run also on navigating away from, or closing that page. if you want that effect use that instead of this. – Jasen Dec 26 '14 at 06:31
  • Hi @Jasen. onBeforeUnload() doesn't work on Mobile Safari, so I'm looking for a work-around to simulate duplicated form submission. I want to have this feature on the home page, so cannot make a link for this. Do you have any ideas? – user44858 Dec 26 '14 at 06:49
  • yes, use javascript form submission to make a post request to your home page if they hit the URL with a GET request, basically if the send a GET request send them HTML containing a POST form and javascript like `document.forms[0].submit()` – Jasen Dec 26 '14 at 07:04
  • hi @Jasen, I created a hidden form, submitted it to my home page in document.ready(). It's working but the homepage is loaded 2 times if user hit the url (b/c it's reloaded when submit the form). Is there any better way? – user44858 Dec 26 '14 at 08:22
  • I can only suggest this: when you get the GET request serve only a minimal page with the form and the one line of javascript, that will load and close as quick as it can. – Jasen Dec 26 '14 at 08:47
0

What you want is to listen for the beforeunload event and throw up a confirm box.

EDIT: Since you've stated in comments on another answer that you need to support Mobile Safari (which doesnt support beforeunload. You could try a library like jquery.AreYouSure

Per the discussion on this page, it supports Mobile Safari, though I havent used it myself

Note that some browsers will ignore the text you provide in the confirm call and show their default text instead. There are more in depth ways to get around that but this will prompt the dialog box.

$(window).on("beforeunload", function() { 

      return confirm("Do you really want to close?"); 
});
Community
  • 1
  • 1
Wesley Smith
  • 19,401
  • 22
  • 85
  • 133
0

How did you manage to disable everything?

For the browser button, cross-compatible per MDN:

window.onbeforeunload = function() {
  return "Data will be lost if you refresh the page. Are you sure?";
};

For the keystroke:

window.addEventListener("keyup", checkForRefresh, false);

var checkForRefresh = function(event) {
   if (event.keyCode == 116) {
        alert("Data will be lost if you refresh the page. Are you sure?");
   }
};

The keystroke may need polyfill for IE8, but they provide it in the docs.

Adam
  • 2,027
  • 1
  • 16
  • 27
  • do you know the reason for `window.addEventListener` ? I see the recommendation in the linked docs but I dont see any explanation as to why it's needed. – Wesley Smith Dec 26 '14 at 05:36
  • I think it's strange as well that I don't see any examples of `window.onkeyup = function(event) { ...`. It looks like `window.onkeyup` can only reference a function, not call an anonymous function itself. So, you'd have to call a different function anyway, why not use the event listener. There's very little documentation for `window.onkeyup`, so I also couldn't recommend it for compatibility reasons. – Adam Dec 26 '14 at 05:46
  • I tried onbeforeunload() but it doesn't work on Mobile Safari. I found one site working very well on this feature : https://internet-banking.dbs.com.sg/IB/Welcome . But not sure how they implement it – user44858 Dec 26 '14 at 06:12
  • @user44858, I don't have access to that welcome page, but I did go on to the login page. They are using the standard form resubmission alert that comes with Chrome. – Adam Dec 26 '14 at 06:24
  • hi @Adam, I don't have access either. How could I have the same standard form resubmission? – user44858 Dec 26 '14 at 07:54
  • Generally by just refreshing the page while working with a form, the browser with prompt the user. I asked a [question here](http://stackoverflow.com/questions/27658495/what-is-confirm-form-resubmission-and-how-is-it-triggered) and the user said that the form submit method needs to be POST. – Adam Dec 28 '14 at 21:38
0

From other disccussion:

There are 2 approaches people used to take here:

Method 1: Use AJAX + Redirect This way you post your form in the background using JQuery or something similar to Page2, while the user still sees page1 displayed. Upon successful posting, you redirect the browser to Page2.

Method 2: Post + Redirect to self

This is a common technique on forums. Form on Page1 posts the data to Page2, Page2 processes the data and does what needs to be done, and then it does a HTTP redirect on itself. This way the last "action" the browser remembers is a simple GET on page2, so the form is not being resubmitted upon F5.

You can refer this answer: https://stackoverflow.com/a/3968038/1853444

Community
  • 1
  • 1
Nguyen Giang
  • 23
  • 7