Good day. There is a table with the goods. Each product has the ability to edit multiple fields. Data is saved via AJAX (for each product its own Save button).

There is also a navigation below. How to make it so that when you try to leave the page (close) or navigate through the navigation, you check whether the changes are saved in the product fields or not. If not, then issue a message.

I still see the next option. When changing the data fields of the goods recorded in a hidden input message (for example, 1) that the fields have undergone a change. And when saving, clear the value of this input. Thus, when navigating, I can do a check for filling such input-s.

But maybe there is a better solution?

  • one
    And why can not you put these "1" in the variable JS? - Yuri
  • A good option. I like. It looks like input, but more versatile. Thank. - Pavel Zhukovsky

1 answer 1

Personally, I prefer to mark modified inputs with a special class, for example dirty.

$("#mytable input").change(function() { $(this).addClass("dirty"); });

And it's easy to check:

 if($("#mytable .dirty").length) { ..... }

and visually can be highlighted using css:

 #mytable .dirty { background: #ffffaa; }

UPD: well, when you save, do not forget to clean

 $(".....").removeClass("dirty");