Setup

I implemented some code to protect against users losing data from unsaved form that was supposed to show this but my code did not appear to be executed. My Code:

$(window).on('beforeunload', function (e)
{
  if ($('.loading').length)
  {
    var confirmationMessage = 'Data is still being saved and/or loaded in the background. Leaving the page may cause your data to not be saved correctly.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }

  if ($('form.detect-dirty.dirty').length)
  {
    var confirmationMessage = 'You have edited but not saved a form on this page.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }
  return false;
});

$(document).on('submit', 'form', function()
{
  $(window).off('beforeunload');
});

Similar to what is pulled from this ticket: Display a warning with 'onbeforeunload' when leaving a page, except if 'Submit' is clicked

Of course there is additional code that marks a form as dirty when a field is edited.

The Problem

Starting a few days ago my web app suddenly started showing a window on every operation that would leave the page stating "Changes you made may not have been saved."

This ignored my dirty flag and the loading class that are required for the interruption and would not display my custom messages.

Side Note

The wording of my question is flagged as "subjective" however I tried to phrase it in the form of a question and match the key words I searched for in google to find the solution I'm about to post.

Setup

I implemented some code to protect against users losing data from unsaved form that was supposed to show this but my code did not appear to be executed. My Code:

$(window).on('beforeunload', function (e)
{
  if ($('.loading').length)
  {
    var confirmationMessage = 'Data is still being saved and/or loaded in the background. Leaving the page may cause your data to not be saved correctly.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }

  if ($('form.detect-dirty.dirty').length)
  {
    var confirmationMessage = 'You have edited but not saved a form on this page.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }
  return false;
});

$(document).on('submit', 'form', function()
{
  $(window).off('beforeunload');
});

Similar to what is pulled from this ticket: Display a warning with 'onbeforeunload' when leaving a page, except if 'Submit' is clicked

Of course there is additional code that marks a form as dirty when a field is edited.

The Problem

Starting a few days ago my web app suddenly started showing a window on every operation that would leave the page stating "Changes you made may not have been saved."

This ignored my dirty flag and the loading class that are required for the interruption and would not display my custom messages.

Side Note

The wording of my question is flagged as "subjective" however I tried to phrase it in the form of a question and match the key words I searched for in google to find the solution I'm about to post.

• javascript
• jquery
• google-chrome

1 Answer 1

Remove the 'return false' at the bottom of the function to restore the conditions. Google Chrome has released a security update. With the update even false triggers the unload dialog box.

I found my own answer and thought the munity would benefit from my struggle.

As for the message it is no longer possible to customize these messages. Another issue caused by this update it is also addressed on this ticket: javascript onbeforeunload not showing custom message