.beforeunload only working on refresh

Question

I am trying to alert users before they go to another page within the app, if there is any unsaved information. I'm following the advice from several stackoverflows to use .beforeunload but it is only working when I refresh the page, and not if I click on a link to another page on the site. Am I misunderstanding how to use beforeunload or am I needing another event listener?

application.js

//= require forms.js

forms.js

$(window).on('beforeunload', function () {
    console.log('unloading')
});

It should fire when you click on a link to go to another site/page. — epascarello, Nov 28 '16 at 18:41
@epascarello it doesn't when you go to another page on the site. any thoughts as to why? — gwalshington, Nov 28 '16 at 18:42
So you have it so you preserve the log when page navigation occurs? What browser are we dealing with here? — epascarello, Nov 28 '16 at 18:43
Most likely when you go to another page on your site, you aren't actually going to another page. You'll have to tie this functionality into whatever is handling your "page changing" with a custom dialog. — Kevin B, Nov 28 '16 at 19:20
@KevinB What does that mean? When browsing a site, the browser is handling "page changing". What else would be handling it? — Scott Marcus, Nov 28 '16 at 19:31
@ScottMarcus a "single page application" can have many "pages" (or views), it just doesn't "change pages" by using window.location.href. The fact that the before unload works on reload but not on "change page" indicates to me that changing pages isn't actually reloading the page, it most likely is instead loading in content via ajax, and possibly changing the url using pushstate or hashbang. — Kevin B, Nov 28 '16 at 19:32
@KevinB That's true, but I think from what the OP has said and the advice and responses in the comments that she is not using a SPA. She's indicated that she's built a test page that has nothing but the event handler in it and it's still not working. — Scott Marcus, Nov 28 '16 at 19:43
That's fine, i'm just presenting an alternative possiblity. I don't see anything that rules it out yet, it is certainly supported by the symptoms at this point. If it's not working on a sample.html with nothing else in it, that's a different problem than is described in the question because we can't recreate it other than by purposly inserting invalid code. — Kevin B, Nov 28 '16 at 19:46

Scott Marcus · Answer 1 · 2016-11-28T18:58:05.230

0

The beforeunload event works like this:

    // Fires just before leaving/refreshing the page.  Handler will
    // be passed the event object and if a returnValue is set on the 
    // event, the browser will display a confirmation dialog with the
    // returnValue message displayed.
    window.addEventListener("beforeunload", function (evt) {
      evt.returnValue = "Setting this to anything but an empty string, causes this to work!";
    }, false);

See this Fiddle for an example.

edited Nov 28 '16 at 18:58

answered Nov 28 '16 at 18:41

Scott Marcus

64,069
6
49
71

@epascarello She isn't setting a `returnValue` on the event object. Just as my comments indicate. – Scott Marcus Nov 28 '16 at 18:42
It should work fine the way the OP has it, you can fire off stuff inside without the returnValue. – epascarello Nov 28 '16 at 18:43
@epascarello Not true: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload *When a string is assigned to the returnValue Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). **When no value is provided, the event is processed silently.*** – Scott Marcus Nov 28 '16 at 18:44
I can read: *When no value is provided, the event is processed silently."* That means it is run without the dialog. It does not mean the code inside is skipped. – epascarello Nov 28 '16 at 18:44
If the OP wants to alert the users, then you must set `returnValue`. I don't think you are reading that correctly. – Scott Marcus Nov 28 '16 at 18:45
I added the above to the forms.js file, and it does not trigger anything. I then added to the html page itself in script tags, and again nothing was triggered. – gwalshington Nov 28 '16 at 18:47
@gwalshington I think you've got a different issue then. This code works across all modern browsers. If it's not running, you must have another issue. Have you checked your console for errors? – Scott Marcus Nov 28 '16 at 18:49
@gwalshington Also, I would try the code just as I have written it - - without the use of JQuery. That way we can rule out JQuery as interfering. – Scott Marcus Nov 28 '16 at 18:50
@ScottMarcus no errors, and the code was copy and pasted - no changes when tested. – gwalshington Nov 28 '16 at 18:53
@gwalshington I would suggest you try this code in a fresh file that doesn't have any other JavaScript in it and place the code in the actual file as a test. By the way, what version of Chrome are you using? – Scott Marcus Nov 28 '16 at 18:55
@ScottMarcus I actually created forms.js just to test this function- there is nothing else in this file. – gwalshington Nov 28 '16 at 18:56
1

@gwalshington See this https://jsfiddle.net/9L7kte3k/4/ for an example. – Scott Marcus Nov 28 '16 at 18:58
@ScottMarcus thanks scott this worked for me, my questions is how do we change the contents inside dialog box so I can have a customisable warning before user leaves. – alexW Sep 24 '19 at 03:29

.beforeunload only working on refresh

1 Answers1