jQuery Applied to an ASP.NET Page to Produce a Dirty Form Flag
A useful application of jQuery to an ASP.NET web page is a dirty form flag. When a user changes the contents of an element, a dirty flag function bound to the change or other appropriate event will set a form variable to 1 and change the appearance of the form element to provide the user with a visual indication of a change. In the form below, if a user enters or changes anything on the form, the programmer wants the user to be informed of the change, and set a dirty flag variable.
The first item is to add CSS classes to change the appearance of the above form elements:
<style type="text/css"> input.dirty {background-color: #FFB6C1 ;color: #000000 ;}
select.sdirty {background-color: #FFB6C1 ;color: #000000 ;}
input.clean {background-color: #FFFFFF ;color: #000000 ;}
select.clean {background-color: #FFFFFF ;color: #000000 ;}
</style>
The jQuery code to apply the dirty appearance to the changed element is:
$(document).ready(function(){ $(":input").change(function(){ $('#DirtyFlag').data('object', 1); $( this ).addClass( "dirty" ); });
$(":select").change(function(){ $('#DirtyFlag').data('object', 1); $( this ).addClass( "sdirty" ); });
$("#RadioButton1").click(function() { $('#DirtyFlag').data('object', 1); $(this).addClass("dirty"); });
});
When an input element is changed, the dirty CSS class applies the new properties to the element. If the user enters data into one of the textboxes, then the appearance of the affected element is altered when the user leaves the textbox or any of the other elements as well with the "$( this ).addClass( "dirty" );" line of code:
The dirty flag will also be set to 1 from 0, when the contents of one of the input, select, or radio elements above, the the programmer wants a form variable in the client browser contain the results. In this example, the results will be contained in a div element named "#DirtyFlag". That's what the "$('#DirtyFlag').data('object', 1);" line accomplishes. The "#DirtyFlag" (<div id="DirtyFlag" ></div>) div was initialized to "0" when the page loaded with:
$(document).ready(function(){ $('#DirtyFlag').data('object', 0);});
The "Show Dirty Flag Value" button can display the value of the "#DirtyFlag" variable from jQuery code loaded from a Client Script Manager object with:
//---------------------------------------------------------------------------
/// <summary>
/// Method Name: GenerateArrayScript
/// Description: Loads javascript to Store Array with jQuery Script
/// </summary>
//---------------------------------------------------------------------------
public void GenerateArrayScript(){
string jScript = string.Empty; jScript = "<script language='javascript' type='text/javascript'>window.onload = (function(){try{" + "$('button').click(function(e) {" + " var value; " + " switch ($('button').index(this)) { " + " case 0 : " + " var jList = $( '#list' );" + " var arrValues = $('#store').data('object');" + " $.each(" + " arrValues," + " function( intIndex, objValue ){" + " jList.append(" + " $( '<li>' + objValue + '</li>' )" + " );" + " }" + " );" + " value = 'Retrieved and Displayed Array in List!';" + " break;" + " case 1 : " + " value = 'Displayed Dirty Flag ';" + " alert($('#DirtyFlag').data('object'));" + " break;" + " case 2 : " + " $('#DirtyFlag').data('object', 0); " + " $(':input').addClass( 'clean'); " + " $(':select').addClass( 'clean'); " + " $(':RadioButton1').addClass( 'clean'); " + " alert($('#DirtyFlag').data('object'));" + " value = 'Reset Dirty Flag!';" + " break;" + " } " + " $('span').text('' + value); " + " }); " + "}catch(e){}}); " + "</script>"; if (!ClientScript.IsClientScriptBlockRegistered("ArrayScript")) {
ClientScript.RegisterClientScriptBlock(this.GetType(), "ArrayScript", jScript); }
}
Case 1 and 2 above are the switch selections that show the dirty flag value in the div and reset it to "0" respectively. The Case 0 button will be explained in the Web Service call example.