When the document.ready fires, this data gets set (simplified for
example purposes):
function getFields() {
var s = {
"field1" : $("#field1").val(),
"field2" : $("#field2").val(),
"field3" : $("#field3").val()
}
return s;
}
$("#original-fields").data("fields",getFields());
Then, when someone blurs a field, this gets called:
function autosave() {
$("#new-fields").data("fields",getFields());
var o = $("#original-fields"), n = $("#new-fields");
if (o != n) { // <-- BRICK WALL
someAJAXFunctionThatSavesTheFieldsThatChanged();
}
}
$("input,textarea").blur(function(){
autosave();
});
How can I compare the #original-fields data with the #new-fields
data? As it is, the two always differ; I assume this is because they
are different objects. I need to quickly and efficiently burn through
the two, and compare their data values, returning the field(s) and
value(s) that have changed? I am doing it this way because there are
some fields that, when they are changed, change other fields.
Therefore a simple blur(function(){}) wouldn't quite do it. It would
only save THAT field, but not its affected fields.