Skip to main content

Make Save button Hot after grid data change


I would like to notify users visually that they have some unsaved changes in grid. When page loads user will see a grid with normal Save button. Then he make some changes and immediately Save button becomes Hot (green in my case) which signals to him that there are some unsaved changes.

I do it via JavaScript mutation observer feature, I am waiting for Edit button CSS style change. When this happens, I will change Save button class to hot. Just run the following code when page is loaded.

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var $target = $(;
            if ($target.hasClass('is-active')) {
                var $save = $target.parent().parent().find('button.a-Button.a-Toolbar-item.js-actionButton[data-action="save"]');
                //observer.disconnect();  // remove observer when fired
    $.each($('div.a-Toolbar-toggleButton.js-actionCheckbox.a-Toolbar-item[data-action="edit"] > label'), function(i, el) {
        // assign unique ID + apply tracker/observer
        $el = $(el);
        $el.attr('id', 'OBSERVE_' + $el.attr('for'));
        observer.observe($el[0], {
            attributes: true

I know that this is not the best way how to do it, but at least something.
Do you know a better way how to do this?


  1. Good thought, but wouldn't it be better to track the grid cells themselves? You have there something like: td role="gridcell" tabindex="-1" class="a-GV-cell u-tC" and when you change it, you get new class there td role="gridcell" tabindex="-1" class="a-GV-cell u-tC is-changed". When you track clicking on the "Edit" button, user might click on it, then change mind and you might falsely claim there is something to save.


Post a Comment