Implementing dirty indicator for 3 different divs within an ASP.NET page

Question

I have an ASP.NET page that has three divs within the only form which renders as three jQuery ui tabs. All the three tabs have inputs and/or selects that gets submitted to separate web methods.

On tab one there are two inputs of type submit, that redirects after committing the form to another page. Simultaneous edits are possible on all the three tabs, and therefore there is a need to implement some kind of form-dirty (section-dirty rather) indicators on the form.

The user needs to be warned before committing the redirecting-submits with an OK/Cancel prompt.

The section level dirty indicator should be resettable separately, sectionwise.

The DirtyForm jQuery plugin looks a good place to start, but wanted to hear about any caveats of this approach.

Has someone done anything like this? Thanks

Answer 1

I've been doing something similar, also using the DirtyForm plugin and it's been working great. We'll basically just bind the dirty and clean events like this:

    $(".section").dirty_form().dirty(function(event, data) {
        $(".indicator").addClass('dirty');
    }).clean(function(event, data) {
        $(".indicator").removeClass('dirty');
    });

After it's setup, we'll highlight each section that doesn't pass validation before the submit. I'm sure you can do something similar and just put alerts instead of adding dirty classes.