Monday, September 13, 2004

Capturing the close event.

When programming a thin-client application using HTML and JavaScript and you want to capture the closing event, it is not as easy as one thinks if you are not used to it. It is easy, but you actually have to do some research and think before attempting to do it. I have two examples.

Example 1:

In the onBeforeUnload event of the body tag, you can set the the event.returnValue to something.

ex.
    <body onBeforeUnload="event.returnValue = 'Would you like to close?';">

By setting the event.returnValue to something you are prompted with a dialog that includes the following message:

    Are you sure you wish to navigate away from this page?
    Press OK to continue, or Cancel to stay on the current page.

Your message will appear in between each of the statements.


Example 2:

You can simply provide the users with a button to close/exit and prompt them with a dialog box. One of the easiest ways to do this is with a JavaScript confirm.

ex.
    function myConfirm()
    {
        var saved;

        saved = confirm("Changes have been made.\nClose without saving?");
        return saved;
    }

By assigning the confirm to the saved variable, we are capturing the result. With the result is what you determine what you are going to do. If they click OK, a 1 (one) is returned for true. If they click Cancel, a 0 (zero) is returned for false.

Note: When you use example 2, the user can still click the X, use the close in the file menu, or use the close in system menu to close without you having any control.

Note: These solutions are Internet Explorer (IE) specific.

No comments: