Warn user about unsaved changes to a form, when a form is being replaced during an AJAX call?

Question

I'm new to Javascript and JQuery, and I'm implementing a warning to users that displays when they have made unsaved changes to a form's input/select/textarea elements if they navigate away from a page. I currently have the following which works fine when they leave a static form page:

/*
 * Warn users when leaving a page with unsaved content, watches elements: (input, textarea, select) unless
 * they are tagged with the "noWarning" class
 */
$(document).ready(function() {
    $(document).on('change', 'input:not(.noWarning),textarea:not(.noWarning),select:not(.noWarning)', function () {
        window.onbeforeunload =  function(e) {
              return 'You have unsaved changes';
        };
    });
});

The only page where it does not work, is in our main editing page. This page, unlike the others, has multiple tabs for editing different aspects of an item, which when clicked, trigger an AJAX call which replaces the content div with the appropriate form for editing the different aspect.

No warning dialog is displayed when a user clicks on a tab though, so any unsaved changes to the input are lost.

My intuition is that because the url is not changing, onBeforeUnload() is not executing. So I would have to check for any changes directly in the function which handles the AJAX call for replacing the form when a tab is clicked:

function clickedTabbedMenu() {
   // This function replaces the content div with a new div and form
}

So my question is, how do I go about checking if any changes have been made to the elements in the current form before I replace the content div with another??? Can I directly call the "change" event listener for a true/false??? Or perhaps a different approach to handle this page's warning messages?

Any help is appreciated

If you are looking for a solution which raises onbeforeunload event when an ajax call made then it is nearly impossible. You need to have your own implementation to detect changes when makeing ajax call. — Mihir
It is not necessary to call onbeforeunload.... I was thinking more along the lines of, when I call the function on the tab to switch forms, query the currently loaded form for a "has the user made changes to any element?" and if so display an alert on whether to continue or not, else, just continue replacing the form — Christian

Amadan Amadan · Accepted Answer · 2014-10-20T16:49:10

Attach a change event handler to all the elements of the form. Have a variable outside the handler's scope dirty (or even a data on the form element) be set to false when a form is loaded, and true on every change event. Then, before replacing the form, check if dirty.

This would also be a good strategy for your non-AJAX pages as well - instead of setting the whole onBeforeUnload each time an element changes, just set onBeforeUnload once, and check if dirty inside it. This makes handling your AJAX and non-AJAX pages very similar.

EDIT: Untested because it's late and I need bed, but basically:

$(document).ready(function() {
    var dirty = false;
    $(document).on('change', 'input:not(.noWarning),textarea:not(.noWarning),select:not(.noWarning)', function () {
        dirty = true;
    });
    function checkDirty() {
          if (dirty) {
              alert('You have unsaved changes');
              return false;
          }
          return true;
    }
    // for non-AJAX pages
    window.onbeforeunload =  function(e) {
        return checkDirty();
    };
    // for AJAX pages
    $('.ajax_navigation_tab').on('click', function() {
        if (!checkDirty()) {
            // do the ajax thing
            dirty = false;
        }
    });
});

Warn user about unsaved changes to a form, when a form is being replaced during an AJAX call?

2 Answers