Java Script form handler class. Part 2: implementing the locking feature.

Java Script form handler class. Part 2: implementing the locking feature. Jun 24, 2008

In part I I've showed how I use my class FormHandler for processing hot keys in client-side forms. In this post I'm going to demonstrate the locking feature implemented in FormHandler. You may download an archive with all tutorial files here: locks.zip.

Locking is necessary when you want to avoid executing some code while another code is being executed. Imagine, user clicks the Entery key on a product order form. You send an AJAX request to a server with order details. You don't want the user make another order by pressing the Enter key for the second time. What you want to do is to lock the form until the AJAX request is complete. In this case it's good to use the locking feature.

I have defined 3 methods in FormHandler class:

setLock(Name) – add a lock with a specified name
getLock(Name) – check whether a lock with a specified name exists
removeLock(Name) – deletes a lock with a specified name

These methods have very simple imlementation. They use MooTools Hash class.

this.locks = new Hash();
..
getLock: function( Name )
{
return this.locks.has(Name);
}
…

After that I can use these methods in my form classes extending FormHandler this way:

var KeyTester = new Class({
Extends: FormHandler,
initialize: function()
{
this.parent({
keyMap: {
'LoginForm:enter': this.login.bind(this)
}
});
},
login: function()
{
if (this.getLock('login'))
{
alert('The form is locked. Processing request...');
return;
}
this.setLock('login')
alert('Login form submitted!');
}
});

When user presses the Enter key for the first time, the handler class sets the lock «login», that will not allow the method code to be executed for the seocond time. You may look how it work here.

I widely use this method in my applications. It is simple, useful and it really saves time. Sometimes I develop complex pages where user can edit many objects on a same page. In such cases I assign dynamic names to locks, matching object identifiers.

In a next post I will go into detail on how I implemented the simple loading indicators support.

0 comments | Posted in javascript, tutorials