dirtyFields jQuery Plugin

Examples

• Default Settings
• Custom Settings, Callbacks, and Some Public Functions
• Adding Fields Dynamically

Default Settings

This example demonstrates what the plugin does with form fields on its default settings. Change the values of the text input, textarea, and select box, and as they lose the focus you'll see their labels change. Click on the checkboxes and radio buttons to see a similar thing happen with the associated text. Change things back to where they started to reverse the style change.

View code

<style>
    .dirtyField {color:red;}
</style>

$(document).ready(function() {
    $("#demo1").dirtyFields();
});

Custom Settings, Callbacks, and Some Public Functions

This example demonstrates the following:

• The use of the denoteDirtyForm option to track whether the form is clean or not.
• The use of the denoteDirtyOptions option with a multi-select drop-down box.
• The use of the dirtyOptionClass option to customize the name of the CSS class to use to style dirty <option> elements (the default class name is "dirtyOption").
• The use of the trimText option to ignore leading or trailing spaces when evaluating if a text field has changed or not.
• The execution of all three plugin callbacks.
• The use of the formSaved and rollbackForm public functions.

As you make changes to the form, the various callbacks will add logging statements to the <div> block below the form, and the formChangeCallback will change the background color of the form and disable or enable the form buttons depending on whether or not the form is dirty. After you make a few changes, click the "Reset" button to undo all of your changes. Make a few additional changes, the click the "Fake Submit" button to simulate an AJAX form submission and update the saved values/states of each form field with the current field values/states. Make another change or two, then click the "Reset" button again, and note how the values were reset to what they were just after you clicked the "Fake Submit" button, and not to the values that existed when the page was first loaded.

View code

<style>
    .dirtyField {color:red;}
    .dirtyForm {background-color:#ffffcc;}
    .dirtyChoice {font-style:italic;font-weight:bold;}
</style>

$(document).ready(function() {
    var demo2Settings= {
        denoteDirtyForm: true,
        denoteDirtyOptions:true,
        dirtyOptionClass:"dirtyChoice",
        trimText:true,
        preFieldChangeCallback: function(originalValue) {
            $("#callbackBox").append("[preFieldChangeCallback] Original value of field '" + $(this).attr("name") + "' is: " + originalValue + "<br />");
        },
        fieldChangeCallback: function(originalValue,result) {
            $("#callbackBox").append("[fieldChange callback] Original value of field  '" + $(this).attr("name") + "' is: " + originalValue + ".  Dirty status is " + result + "<br />");
        },
        formChangeCallback: function(result,dirtyFieldsArray) {
            if(result)
                {
                    $(this).find("input[type='button']").attr("disabled",false);
                    $("#callbackBox").append("[formChangeCallback] Form is dirty. Dirty fields are: " + dirtyFieldsArray + "<br />");
                }
            else
                {
                    $(this).find("input[type='button']").attr("disabled",true);
                    $("#callbackBox").append("[formChangeCallback] Form is clean.<br />");
                }
            //Scrolls the logging div to the bottom
            var objDiv = document.getElementById("callbackBox");
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    };

    $("#demo2").dirtyFields(demo2Settings);
});

Adding Fields Dynamically

This example demonstrates the use of the configureFields public function to add the event handler to new form fields created after the page has been loaded. Click the "Add Member" link to add new team members, and make changes to those new form fields to see how the correponding labels are updated.

View code

<style>
    .dirtyField {color:red;}
</style>

$(document).ready(function() {
    $("#demo3").dirtyFields();

    $("#addMember").click(function() {
        //Code to create the new fields and set the names and ids
        memberCount= memberCount+1;
        var newBlockId= "memberBlock" + memberCount;
        var newTeamMemberId= "memberName" + memberCount;
        var newSkillLevelId= "skillLevel" + memberCount;
        var $memberBlock= $("#template",$("#demo3")).clone();
        $memberBlock.attr("id",newBlockId);
        $memberBlock.find("label:eq(0)").attr("for",newTeamMemberId);
        $memberBlock.find("input").attr("id",newTeamMemberId).attr("name","memberName");
        $memberBlock.find("label:eq(1)").attr("for",newSkillLevelId);
        $memberBlock.find("select").attr("id",newSkillLevelId).attr("name","skillLevel");
        //Add the new set of fields
        $("#memberFieldset").append($memberBlock);
        //Use the plugin's setStartingTextValue and setStartingSelectValue to store the initial value of the fields
        $.fn.dirtyFields.setStartingTextValue($("#"+newTeamMemberId),$("#demo3"));
        $.fn.dirtyFields.setStartingSelectValue($("#"+newSkillLevelId),$("#demo3"));
        //Use the plugin's configureField function to set the event handlers
        $.fn.dirtyFields.configureField($("#"+newTeamMemberId),$("#demo3"),"text");
        $.fn.dirtyFields.configureField($("#"+newSkillLevelId),$("#demo3"),"select");
        //Show the new set of fields
        $memberBlock.removeClass("hideElement");
        return false;
    });

});