Existing Library to confirm losing changes on page unload

Does anyone know of an existing library for confirming that you want to leave the page or form without saving your changes?

I found something on jquery's are you sure plugin - don't recommend that as it was abandoned in 2014 and is buggy.

Is there anything new and stable that exists?

my development environment:
asp.net web forms, vb.net, C#

thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi Starr,

I have used this one in past, https://github.com/snikch/jquery.dirtyforms

Also from dialogs perspective (this might be an overkill for you but) have you considered using: https://github.com/craftpip/jquery-confirm

Check the samples at :
http://craftpip.github.io/jquery-confirm/


You have to wire-up your own onbeforeunload if you choose to use jquery-confirm and your own form dirty-ness tracking method.

Regards,
Chinmay.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Browsers have changed - all you are able to do now is trigger the Leave / Stay message box - you don't need a plugin.

Take a look at the onbeforeunload event

From this page
The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
And especially take note of this section
Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all. For a list of specific browsers, see the Browser_compatibility section.

You can see the browser compatibility section here.

Sample from that page (subject to the proviso above)
window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

Open in new window

1
NerdsOfTechTechnology ScientistCommented:
From a user's perspective, if the form is being closed, it is likely being closed on purpose, so a dialog asking "Did you want to save changes? Y/N" is annoying (in my opinion). Pop-ups like this are disabled on many browsers for this reason. Can you imagine every site asking you "Are you sure you want to leave?" on close? Yikes!

However, I think the only option you have here is to SAVE the form data in the background, then offer the ability to retrieve the form data as a dialog on unload (if the browser allows it, and if you *really must*); or, consider the data abandoned and available for retrieval for the user (say if they have an account with an email, cookie, session, etc to correlate the form data to their identity). Again, this should be used sensitively if the reason why they are closing is on purpose. You don't want to spam the user.

Also note:

HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
NerdsOfTech, my client's requirements are not based on your opinions.

And neither are they based on my opinion. But here is my opinion.

Yes, sometimes I close the window without saving on purpose because I changed my mind and don't want to fill out their form. Saving my data in the background when I'm trying to exit or change my mind, would be not just annoying, but I would be upset that they wiped out my stuff that I decided NOT to change.

In other situations, I have filled out the form in detail and totally forgotten that I didn't save it or that I was even filling something out because I got distracted and am closing down extra browser windows, so the reminder is useful with an "Oh my goodness, I would have lost all this!"

I'd much prefer getting the annoying message rather than losing everything I filled out already.
1
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Chimay and Julian,

Thanks for your on point replies and I will take a look at them next week.
0
Chinmay PatelChief Technical NinjaCommented:
You just made my day... THANKS... have a great weekend.
0
Julian HansenCommented:
I agree with Nerds of Tech - it is not a good practice to have the exit popup - it is synonymous with sites that have a dubious reputation. Suggesting this does not mean that one should then accept that form data can be lost.

If you are concerned with data being lost it is a simple matter to detect a form change, serialize the form and save it to localStorage. On page load you can check local storage to see if there is data saved there and then either
a) Prompt the user (We have detected that you have changes you did not save - here they are do you want to keep them Yes / No)
b) Simply populate the form with the data.

The process for doing the above depends on your situation but if you are concerned with losing data that has not been saved this is the way to do it - it is a strategy employed in applications that are designed to go offline - or where connectivity is not guaranteed.

With reference to your concerns though - the bare facts are that the browser is going to block you doing it the way you want to.
1
NerdsOfTechTechnology ScientistCommented:
If it is the client attempting to save common form data (name, address, etc) on sites they don't own, I would suggest having autofill on (Chrome, for instance, is great at doing this for you and it is free); if your client is using a different browser, Roboform is another good alternative (this add-on does cost money though).

If you want the pop-up functionality on your site, it is very likely that the browser users will use will disable such functionality by default. Moreover, by instead saving the data in the background when the user exits, for example to a database which correlates identifying info, you could retrieve or present the saved data to the user upon return to the site when your site matches such identifying info (e.g. login).
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I don't think some of you know how to use Experts-Exchange.

I ask a question.

You answer the question.

I don't want your opinions on what you prefer doing or whether you think it's right or wrong to do.

If it's impossible to do, that is one thing, if it is just your opinion that it should not be done, that's another.

I won't give you points for your opinions that do not answer the REQUIREMENTS SET FORTH BY MY CLIENT THAT I HAVE NO CONTROL OVER.

Got it?

If you know how to do what I ask, then respond, otherwise, please STOP WASTING MY TIME with your opinions.

I did NOT ask you what you think.
0
Julian HansenCommented:
The importance of expert opinion is recognised across many disciplines - the "opinion" as you "expertly" refer to it goes to the WHY behind browsers not offering the functionality you want.

The bottom line is - you cannot do what you want - end of story.

STOP WASTING MY TIME
I have no problem with this - I will not answer any more of your questions.

Good luck.
1
NerdsOfTechTechnology ScientistCommented:
Background: Although the browsers may fire the event (onbeforeunload) upon exiting the page, many browsers ignore custom alert(), confirm(), and prompt() methods within the event.

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Thus, no pop-up occurs on those browsers which ignore those three 'pop-ups'.

Answer: Therefore, if the user is using a browser which ignores custom pop-ups --- unless one creates a script that saves the form data, correlating the user in an identifiable way which would allow the data to be retrieved at a later visit --- the data will be lost.

Opinion: Most of us get paid big bucks at our real job for our expert opinion. On this site, however, most of the experts here volunteer time and receive points which hold no monetary value. We get [lousy, but very nicely designed] t-shirts for achieving enough points in a certain category or field of study. Ergo, as you can see we aren't financially motivated. Although some askers pay experts-exchange for our advice, in the form of our 'expert opinion', which, hopefully, cite references or code to help answer your question, we typically earn free membership ('expert qualified'). This is the exchange part of experts-exchange, we provide help in return for help.
1
Chinmay PatelChief Technical NinjaCommented:
Hi Starr,


While I do not agree with the comment on how EE works, I do understand why you feel irritated. And before I dive in to the question part further, I think most of the experts on EE try to help people and providing opinions based on experience is a major part of it - and while the opinion might not align with your query both experts are trying to do that only. They are pointing to a potential Gotcha for you, way before it happens to you and might create a major/minor discomfort for you in future. I know On EE, many experts provide 1:1 help and do not charge a penny to the customers they do it because they like to help people - that's all.

Also, for the first 5-7 years of my career I was bullish on Technology driving Business (My mentors tried to teach me that it is other way around many times, but I was young and... naive - I didn't pay heed) but I realize how most of the times it is business who will drive everything and even though we know better, we can't do anything about it.

Now, coming to the question, you can be assured that as long as your end user changed the form S/He will see a popup - no matter which browser they are using.


Ref: https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-documents

Regards,
Chinmay.
0
Julian HansenCommented:
You can get a popup, you can't change the text and you can't run any other script as part of the onbeforeleave - this has already been answered here https://www.experts-exchange.com/questions/29094182/Existing-Library-to-confirm-losing-changes-on-page-unload.html#a42531587
2
Chinmay PatelChief Technical NinjaCommented:
just a minor correction ... it is onbeforeunload.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.