Page Dirty Handler for Navigating away

Starr Duskk
Starr Duskk used Ask the Experts™
on
User has filled out the form and is navigating away without saving. I want a custom alert to display, warning them and asking if they wish to proceed or save.

I searched on here, but the result was from 2007. Gotta be something more modern out there. I've seen them.

I was told that this can only be done using the browser's built in alerts, but I'm sure I've seen custom, nice looking alerts.

Any suggestions where I can find something?

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi Starr,

This can be bit tricky,  have you seen the https://www.w3schools.com/jsref/event_onbeforeunload.asp.

AFAIK you can display a custom message only in IE. Other browsers have stopped supporting it.

Regards,
Chinmay.
David FavorFractional CTO
Distinguished Expert 2018
Commented:
There are several parts to this process.

1) Attach an event to either every form on the page, to fire on every keystroke.

2) Every keystroke (#1 function fires) increments a global dirty flag, so if this flag != 0, some data has been typed.

3) Use something like https://api.jquery.com/unload/ to run a simple bit of code to check the dirty flag at page exit/unload time. If the dirty flag != 0, then prompt user to continue or cancel.

Use JQuery for this to abstract away any browser differences, so you only have a single function to maintain for all browsers, very old + new ones in the future. Just keep JQuery up to date.
Hi,

the best to my opinion is Dirrty

First I started with this one https://github.com/rubentd/dirrty
then I implement some features of this one
( this fork is more active and more complete )
https://github.com/simontaite/jquery.dirty

I would start with https://github.com/simontaite/jquery.dirty as it cover a lot.

Unfortunately about the alert for security reason it's no longer possible to customize onbeforunload event.
So you will get the alert text and model from the browser.

There are other method but this is not reliable, I have tried a tons since 2 years as my project need that feature.
The most important is that the user get the alert when required.
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thanks all!
David FavorFractional CTO
Distinguished Expert 2018

Commented:
You're welcome!

Good luck!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial