AutoSave Form Fields using jQuery – Part Two of Three

In my preivous post, I introduced “self submitting forms” with the help of some jQuery functions. I had 2 out-standing (todo) items from that post (and work). The first was to have some tracking around the input elements and when they’ve been re-modified before a delayed post has occurred.

Item 1 – Tracking Recently Modified

Problem Definition:
There are 2 input fields: “Deadline” and “Task Name”, the user modifies “Task Name” then “Deadline” then “Task Name” again. Under the previous approach, the first delayed processing of “Task Name” would end up sending 2 pieces of data in the form submit as separate actions. This is not optimal.

Solution Description:
Track when the input elements were modified, and if they’re modified in some “reasonable amount of time” again, then don’t send the previous value. This is for now is simply achieved by tracking the input element name with a “modified times” count value. Every time a change is made to an input element, we “push” the details onto a central collection, when it’s time to attempt to send the data we “pop” off that central collection.

Solution Steps:

1. Have somewhere to store the entries in a central collection, a simple dictionary style variable is fine for now.

var activeInputs;
//initialised later
activeInputs = {};

2. When an input element is modified, we simply store it’s ‘id’ and increment it’s modified counter in the ‘activeInputs’ dictionary:

var elemId = c.attr('id');
//c here is the input element that is associated with the handling event.

if(activeInputs[elemId] == null)
    activeInputs[elemId] = 1; //initialise
else
    activeInputs[elemId] = activeInputs[elemId] + 1; //increment

This method is the “push on to stack” approach, and does not need to supply feedback.

3. We next will need a method to decrement this, along with returning the modified count value:

var elemId = c.attr('id');
if(activeInputs[elemId] == null)
    return -1; //erorr state

if(activeInputs[elemId] > 1)
{
    countVal = activeInputs[elemId];
    activeInputs[elemId] = activeInputs[elemId] - 1;
}
else 
{
    countVal = activeInputs[elemId];
    activeInputs[elemId] = 0; //reset it
}

This method is the “pop from stack” approach; we need it to inform us if the input data was in fact ready to be “sent off”

So now if you recall the ‘startCountDownAndSendData’ function from the preivous post it had line to submit the form, this can now be wrapped by a check via the “pop” method to see if it should send. If there’s been a recent edit (i.e. the ‘activeInputs’ value is greater than 1), then it will not send.

I didn’t name the methods earlier, and only showed their internal workings, as naming these functions was tricky, but in the next code snippet, I give the pop method a name, to see them in action as a whole check it out on jsFiddle.

if(popProcessedControlFromStack(c) == 1)
{
    //if value "1" - active control then submit, otherwise it was editted recently                
    $('form#MyFormId').trigger('submit');
}

Item 2 – User Feedback on Progress

The second out-standing issue from the preivous post was the user feedback. For now I’m just going to borrow the one from WordPress when you save a post/draft.

Once you actually submit the data, you just need to handle the success response, this will either replace the above section or be a link. But for a bit of a wrap up on this post with the jQuery focus here’s a skeleton function to show some feedback.

function showSuccess(data) {
   $('#someDiv').html('<img id="checkmark" src="/Content/check.png" />');
}

The third (and coming soon) post, will cover the MVC side of this.

Advertisements