ansaurus

Question

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

Answer 1

+3 A:

There is an "onunload" parameter for the body tag you can call javascript functions from there. If it returns false it prevents navigating away.

stribika 2009-07-13 13:01:58

Fortunately, this doesn't actually work. Otherwise I'd hate to visit a page containing `<body onunload="return false;">`.

Søren Løvborg 2009-07-13 13:29:13

Answer 2

+1 A:

When the user starts making changes to the form, a boolean flag will be set. If the user then tries to navigate away from the page, you check that flag in the window.onunload event. If the flag is set, you show the message by returning it as a string. Returning the message as a string will popup a confirmation dialog containing your message.

If you are using ajax to commit the changes, you can set the flag to false after the changes have been committed (i.e. in the ajax success event).

Kirtan 2009-07-13 13:03:00

Answer 3

+2 A:

You can add an onchange event on the textarea (or any other fields) that set a variable in JS. When the user attempts to close the page (window.onunload) you check the value of that variable and show the alert accordingly.

Makram Saleh 2009-07-13 13:03:06

Answer 4

+5 A:

To turn it on:

window.onbeforeunload = "Are you sure you want to leave?";

To turn it off:

window.onbeforeunload = null;

Bear in mind that this isn't a normal event - you can't bind to it in the standard way.

To check for values? That depends on your validation framework.

In jQuery this could be something like (very basic example):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Keith 2009-07-13 13:03:24

I have plenty of TBs in my webform, I wanna set a global boolean flag in the page, then with jquery walk thru all the inputs with type=text and set the onchange to change the flag.the use your function evaluating the flag?

Shimmy 2009-07-13 14:46:03

That would be something like: $('input:text').change(function() { window.onbeforeunload = $('input:text[value!=""]').length > 0 ? "warning" :null; });

Keith 2009-07-13 15:07:49

For a simple check, or you can add more complex validation on each change

Keith 2009-07-13 15:09:50

Answer 5

A:

WHat you want to use is the onunload event in javascript.

Here is an example: http://www.w3schools.com/jsref/jsref_onunload.asp

waqasahmed 2009-07-13 13:03:41

Answer 6

+3 A:

With JQuery this stuff is pretty easy to do. Since you can bind to sets.

Its NOT enough to do the onbeforeunload, you want to only trigger the navigate away if someone started editing stuff.

Sam Saffron 2009-07-13 13:04:07

Answer 7

+1 A:

It can be easily done by setting a ChangeFlag to true, on onChange event of TextArea. Use javascript to show confirm dialog box based on the ChangeFlag value. Discard the form and navigate to requested page if confirm returns true, else do-nothing.

simplyharsh 2009-07-13 13:08:49

Answer 8

A:

As Keith noted, you may use the onbeforeunload event handler to accomplish this. It's an IE-thing, quite non-standard.

Works in IE and Firefox. Doesn't work in Opera. Haven't tested Safari and Chrome.

See this blog entry for more information

Søren Løvborg 2009-07-13 13:21:43

It works in WebKit based browsers (Safari and Chrome) too

Keith 2009-07-13 15:10:32

ansaurus

tags:

views:

answers:

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

related questions