Using JQuery to set 'dirty' elements back to original values.

Question

Hi, I have a Javascript object that basically represents a Row in an .NET GridView. When a user clicks on any row in the grid, all the input elements in that row are 'enabled'.(ie 'Edit' mode).

I run this code depending on which row is selected

$(":input", this._row).attr('disabled', true);
or
$(":input", this._row).removeAttr('disabled');

So far so good. Now, I want to keep track of the values in that row before a user enters the 'Edit Mode', so i can restore the original values if they decide to click out of that row without saving any changes that they made.

So i capture the original values in an array by doing this:

var $inputs = $(":input", this._row);
var values = {}; 
$inputs.each(function(i, el) { values[el.name] = $(el).val(); });

the 'values' array now looks like this:

ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT1    "56" 
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT2    "98" 
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT3        "08"
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT4    "200"

Great so far. The user may then modify these values, but decide not to save the changes. So i need to restore this row back to it's orignal values from the 'values' array. Can someone tell me the best way to do this? Im hoping it's something simple, but i'm no jquery expert, yet..

thanks

Answer 1

I haven't had the time to set up a test, but off of the top of my head I would try:

$inputs.each(function(i, el){ $(el).val(values[el.name]); });

Assuming you have already checked that values have been stored.

Answer 2

Could you not copy the row html and store it, and then if they changed there mind you could just restore the original row?

Answer 3

You can use the 'data method' (http://docs.jquery.com/Internals/jQuery.data) to store relevant data along with the element.

Something like:

//Call this function for each row after the page has loaded. 
function storeOriginalData(row)
{        
    var $inputs = $(":input", row);
    //For each input element inside the table row, we store it's original value 
    //using the 'data' method of jQuery.
    $inputs.each(function(i, el) { $(el).data('oldValue', el.val()); });    
}

//Call this function from the reset button code. 
function resetOriginalData(row)
{
    var $inputs = $(":input", row);
    //Now we get the original value using the data method and store it in the input element.
    $inputs.each(function(i, el) { $(el).val($el.data('oldValue')); 
};

This way, you will avoid the maintenance of the 'values' object for each row.

EDIT:

Modified code with more details and how it works.