CODEWITHSUNDEEP
javascriptjquerydirty-datamementojquery-dirtyforms
NOCARRIER
NOCARRIER

Reputation: 2634

Jquery Forms: using the memento pattern to build a dirty form notification system - exisitng patterns?

I am currently building a script which will notify the user that the form has been changed before they navigate away from the page (This is an ASP.NET MVC app btw).

I first started out building a simple script which detects if the user changes any inputs, and then flips a bit to designate the form as "Dirty".

This ended up being too simple and lacked support for extended form inputs, so I tried a plug in next.

The best one I could find was this: http://mal.co.nz/code/jquery-dirty-forms/

This jquery dirty forms plug in works pretty well, but still lacks one important feature which I require; the ability to compare previous values with what the user entered.

For example, if a text field originally has the value of "Foo Bar", and the user changes that value to "Foo" the form is now dirty.

When the user changes the value of that text box back to "Foo Bar", then using this plug in, the form is still "dirty", which is incorrect per my requirements.

There is no plug in that does what I need it to do, so I will have to build my own, which leads me to my question: what is the best practice for building this kind of functionality?

My idea was this:

My initial thought is that:

Performance and re-usability are definite considerations. I should be able to apply this pattern to any form, and with little work allow it to consume original values and perform validation.

Has anyone seen an existing pattern that is similar to my need? Does my idea sound viable? Does anyone have input on a better route I can take? Getting me started with a code sample I could extend would be fantastic, pseudo code would be good also.

[Update]

Someone just told me what I am trying to do is commonly known as a "form stash", though google doesn't help much with that search term.

This script which I have been working with is similar to what I want to do: (from this page: http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/)

 var formChanged = false;

$(document).ready(function() {
 $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i)     {
      $(this).data('initial_value', $(this).val());
 });

 $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
      if ($(this).val() != $(this).data('initial_value')) {
           handleFormChanged();
      }
 });

 $('#my_form .editable').bind('change paste', function() {
      handleFormChanged();
 });

 $('.navigation_link').bind("click", function () {
      return confirmNavigation();
 });
});

function handleFormChanged() {
 $('#save_or_update').attr("disabled", false);
 formChanged = true;
}

 function confirmNavigation() {
    if (formChanged) {
         return confirm('Are you sure? Your changes will be lost!');
    } else {
      return true;
    }
  }

Upvotes: 1

Views: 1037

Answers (2)

NightOwl888
NightOwl888

Reputation: 56869

Dirty Forms version 2.0.0 now tracks the state of the fields when $('#theform').dirtyForms() is first called. Fields are considered dirty if they do not match the original state and clean if they match.

This is true until you call $('#theform').dirtyForms('setClean'), after which a new snapshot is taken of the current state and any deviations from this new state will be considered dirty.

Upvotes: 0

DarrellNorton
DarrellNorton

Reputation: 4651

I found an implementation of a "form stash" I like better with this plugin: https://github.com/bcswartz/dirtyFields-jQuery-Plugin

Documentation is available at the author's site here: http://www.thoughtdelimited.org/dirtyFields/index.cfm

The difference is the dirtyFields plugin ONLY handles the dirty fields and forms. The dirtyForms plugin also attempts to wire up the onbeforeunload event.

Upvotes: 0

Related Questions