Prevent a user from accidentally leaving a content area with unsaved changes. Init accepts the content area we want to watch changes within as well as the save button that will commit the changes.

preventAbandonment

var ns = ns || function () {

    var self = {}; // required to access public functions/variables 

    return {

        initNS: function () { self = this; return this; },

        ///////////////////////////////////////////////////////////
        // Page State
        ///////////////////////////////////////////////////////////

        preventAbandonment: {
            _button: "",
            _container: "",
            unsavedChanges: false,

            buttonClick: function (button) {
                button.bind('click', function () {
                    if ($(this).hasClass("disabled")) {
                        return false;
                    } else {
                        unsavedChanges = false;
                    }
                });
            },

            toggleAbandomentState: function (_button, bool) {
                var abandonmentRisk = bool;
                if (abandonmentRisk) {
                    unsavedChanges = true;
                    self.preventAbandonment._button.removeClass("disabled");
                    // Re/Set any notification info here for potential lost content
                } else {
                    unsavedChanges = false;
                    self.preventAbandonment._button.addClass("disabled");
                    // Everything's fine, clear out any notifications about potiential lost content
                }
            },

            warnOnExit: function () {
                $(window).bind('beforeunload', function () {
                    if (self.preventAbandonment.unsavedChanges) {
                        return "All changes will be lost if you don't save.";
                    }
                });
            },

            toggleState: function (bool) {
                self.preventAbandonment.toggleAbandomentState(self.preventAbandonment._button, bool);
            },

            init: function (container, button) {
                if (button && button.length > 0) {
                    self.preventAbandonment._button = button;
                } else {
                    console.log('Save button not defined for preventAbandonment');
                }
                if (container && container.length > 0) {
                    self.preventAbandonment._container = container;
                } else {
                    console.log('Watched content area not defined for preventAbandonment');
                }
                self.preventAbandonment._button.addClass("disabled");
                self.preventAbandonment._container.delegate('input', "change", function () {
                    self.preventAbandonment.toggleAbandomentState(self.preventAbandonment._button, true);
                }).delegate('select', "change", function () {
                    self.preventAbandonment.toggleAbandomentState(self.preventAbandonment._button, true);
                }).delegate('textarea', "change", function () {
                    self.preventAbandonment.toggleAbandomentState(self.preventAbandonment._button, true);
                });
                self.preventAbandonment.buttonClick(self.preventAbandonment._button);
                self.preventAbandonment.warnOnExit();
            }
        }
    }
}().initNS();