common js form additions

formhandler.js

/**
 * User: Marco Pfeiffer
 * Date: 04.04.13
 * Time: 09:43
 */

(function ($) {
    var IMPORTANT_FORMS = "form:not(.unimportant):not([target])";
    var IMPORTANT_INPUT_FIELDS = ":input[name]:not(.unimportant)";
    
    // jquery defaultValue extension
    $.fn.defaultVal = function () {
        var input = this[0];
        var $input = $(input);
        var defaultValue = $input.data('default-value');
        if (input == null) return "";

        // if the default value is overwritten use it
        if (defaultValue != null) {
            return defaultValue;
        }
        // special care for select fields
        else if (input.nodeName.toLowerCase() == "select") {
            var values = [];
            $input.find("option[selected]").each(function () {
                values.push(this.value);
            });
            return input.multiple ? values // on multiple return array
                : values.length ? values[0] // on single return first value
                : ($input.find("option:first").val() || ""); // if no value return first option or empty string
        }
        // every other element has the property "defaultValue"
        else {
            return input.defaultValue;
        }
    };

    $.fn.makeDefaultVal = function () {
        this.each(function () {
            var input = $(this);
            input.data("default-value", input.val());
            input[0].defaultChecked = input[0].checked;
            input.removeClass("changed");
        });
    };

    // change identifier
    $(document).on("change.changemarker input.changemarker", IMPORTANT_INPUT_FIELDS, function () {
        var input = $(this);
        var defaultValue = input.defaultVal();
        var value = input.val();
        var changed = false;
        // if the default value is an array we need to compare an array
        if ($.isArray(defaultValue)) {
            if (value == null) changed = defaultValue.length > 0
            else if (defaultValue.length != value.length) changed = true;
            else for (var i = 0; i < defaultValue.length; i++) {
                    if (defaultValue[i] != value[i]) {
                        changed = true;
                        break;
                    }
                }
        }
        else if (input.is('[type=checkbox], [type=radio]')) {
            changed = input[0].defaultChecked != input[0].checked;
        }
        else {
            changed = defaultValue != value;
        }
        //console[changed?"warn":"log"]( JSON.stringify( defaultValue )+ " != " + JSON.stringify( value ) );
        // change class, also think of select2 containers
        input.prev(".select2-container").andSelf()
            [changed ? "addClass" : "removeClass"]("changed");
    });

    // prevent page leaving if form has changed
    $(window).on("beforeunload.preventleave", function (e) {
        if ($("form:not(.unimportant) .changed").length > 0) {
            return "You have unsaved changes!";
        }
    });

    // prevent the onbeforeunload event if a form was submitted
    $(document).on("submit", IMPORTANT_FORMS, function (e) {
        if (!e.isDefaultPrevented()) {
            $(window).off("beforeunload.preventleave");
            $(document.body).ajaxSpinner();
        }
    });

    // disable all form inputs on submit to prevent a second submit
    $(document).on("submit", "form", function (e) {
        if (!e.isDefaultPrevented()) {
            var form = $(this);
            // minimal timeout is required so the fields are still in the form
            setTimeout(function () {
                form.find(':input').prop('disabled', true);
            }, 100);
        }
    });

    // close button handler
    $(document).on("click", "[data-close-target]", function (e) {
        var deleteMessage = $(this).data("close-message");
        if (!deleteMessage || confirm(deleteMessage)) {
            var target = $($(this).data("close-target"));
            target.fadeOut(200, function () {

                // catch the event to check if the default was prevented
                $(document).one("remove", function (e) {
                    if (!e.isDefaultPrevented()) {
                        $(e.target).remove();
                    }
                });

                $(this).trigger("remove");

            });
        } else {
            e.preventDefault();
            e.stopPropagation();
        }
    });

    $(document).on("ready update", function (e) {
        var target = $(e.target);

        // get all date input elements
        target.find("input.datepicker")
            .datepicker({ dateFormat: "dd.mm.yy" })
            .prop({ autocomplete: false });

        // use select2 on multiple selects
        target.find("select[multiple]").select2();
    });
})(jQuery);