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.