Checking for unsaved changes

unsaved.js

// this does not work for inputs which do not propergate their change event, e.g. when using a JS calendar. Use a HTML5 date input instead.
$(document).on('change', 'input, select, textarea', function(e) {
    if ($(this).is('.ignore-unsaved-changes')) { return; }
    $(this).addClass('changed-input');
});

// for ajax clicks we need to check for changed inputs
// it might be possible to do this universally via an ajax hook (something like beforeAjax)
    $('.tab').click(function(event){

        // check for unsaved changes in current tab
        if($('input.changed-input').length) {

            if(confirm('You have unsaved changes, do you want to continue?') == false) {
                // do not load the panel
                event.stopPropagation();
                event.stopImmediatePropagation();
                event.preventDefault();
                return false;
            }
            else
            { 
            ;; do ajax 
            }
        }
        else
        { 
        ;;do ajax 
        }
    });

// non-ajax links
window.onbeforeunload = function() { 
        if($('input.changed-input').length) {
    return "Are you sure you want to leave?" 
        }
}