View Full Version : Modal Messagebox (another thread but slightly different)

15 Apr 2009, 1:27 AM
There have been several posts about modal messageboxes. Response boil down to the fact that modal messageboxes arent possible due to the JS scripting engine execution and that one should use event driven callbacks. I have a case which I can't solve without modal messageboxes. I have posted this elsewhere already but no response yet, so I'll start a new thread.

How would you guys go about the following case:

1. The user navigates to a page where he can enter a data into a form
2. The user presses the back button or any other button over which you have no control (home, favorites, etc)
3. Before actually leaving the page, the user gets the option to save the data entered or discard it. At this moment we use a 'normal' confirm dialog in the onunload event. When the user chooses to save the data, the form gets sent to the server using Ajax.

The onunload event is blocked due to the synchronous nature of the 'normal' confirm dialog. Without blocking the page containing the form is unloaded before a callback function can be called with the asynchronous messagebox. How would you solve this 'problem'?

15 Apr 2009, 8:48 AM
In our application, we have multiple pages (the main page plus additional child pages depending on what the user does). The child pages hook the onunload event and call into the parent to run any cleanup calls to the server since the child will close before the calls are complete. The parent also hooks its onunload and starts its cleanup and then presents an alert (the alert stops the page unload temporarily giving the cleanup calls time to complete) warning the user that they have not closed the application in the proper way.

The main and child pages all have buttons to close their pages properly. These are normal buttons so we can show a nice user friendly UI. Our application runs internally so it is a reasonable compromise to give users the best experience when they use the app as they were trained and a less user friendly experience when they don't.

16 Apr 2009, 5:10 AM
Unfortunately our applications aren't used internally and some of our users aren't very computer minded. Even though they make the mistake of not closing pages properly, they will blame the application (and eventually us) for the loss of data. So far we have been using onunload event combined with alerts, modal dialogs in the case of users using IE and ajax. It's the standard alerts and IE dialogs that I want to get rid of, but I haven't found a way to deal with the above without them.

16 Feb 2011, 2:11 PM
Same problem here, CorpsusVitale. I resorted to the plain old Javascript (non ExtJS) way of solving it, because I wasn't able to figure out how to accomplish a similar feat with the ExtJS MessageBox class (if user is leaving the page, and you do the whole event-based thing recommended in other threads, you have to somehow discover why the user is leaving - not sure how to do this - whether it's visiting another page by clicking a link or one of their bookmarks, closing their window, whatever, store that information, then get the browser to repeat it later at the end of your handler for the MessageBox click; it's not at all clear how to do this).

window.onbeforeunload = function() {
if (pageHasUnsavedChanges) {
return 'The current page has unsaved changes. Are you sure you want to leave?';