Displaying change of content through parent

Question

I have DHTML content inside a fieldset. This includes plain html, nested objects (even other fieldsets), and value change of input, select, and textarea objects.

I'd like to change the border of the fieldset if the contents have been changed. The following works:

$('fieldset[name=qsfs127]').children('input').change(function(){
    $(this).parent('fieldset').css({border:'1px solid red'});
})

This handles the input; I can extend it to select and textarea.

Questions:

How can I do the same for html changes?
Can all of this change-tracking be done by comparing current html() to stored one?
If yes for (2), will this handle cases of "undo"?

Edit: I have a button that ajax-uploads contents, and saves the changes. I then remove the border color

what kind of html changes are you referring to? a change in the DOM? or inside a tag? — elboletaire, Mar 06 '11 at 00:18

score 0 · Accepted Answer · answered Mar 06 '11 at 03:20

1.) You could track HTML changes in a similar way that the jQuery livequery plugin does. The livequery plugin wraps all of the jQuery DOM manipulation methods and when any of them are called, the wrapper method does something special and then proxies back to the original function. This will only work for the update/undo uses cases assuming the both use one of the jQuery DOM manipulation methods to change state.

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //Do something special here! Compare the stored html of the fieldset
      //to the new html state and update border accordingly

      // Return the original methods result
      return r;
   }
});

2.) You could keep track this way, seems a little heavy handed. Without more information about your use case and control of data it is hard to recommend anything.

3.) If you did store the value of the original html() in the fieldset it seems that it would work for the undo case as well. You could just compare the value of the html() after an undo as well. However if you are creating an "undo" button it seems to me that you will need to have some history of all changes, and once the user has no more undos then they should be back at the original state and no comparison of the html() should be needed.

Thank you for a detailed reply. I don't understand how I can use this for a particular `fieldset`. should `.each()` be called just on the object? or is this global for the entire document? Secondly - I didn't mean undo step-by-step. I meant "cancel all changes", so it's much easier — Mikhail, Mar 06 '11 at 16:40
You could call `each()` on all of the fieldsets and check if they have changed. Or at the point of the `//Do something special here!` in the code above, the `this` object will be the element that had one of the DOM change events called on it. So you could do something like `$(this).closest("fieldset")` to get the containing `fieldset`. — Adam Ayres, Mar 06 '11 at 20:27

Displaying change of content through parent

1 Answers1

Linked