When working with JavaScript/jQuery intensive applications one always has to deal with a multitude of AJAX calls. AJAX calls like the name suggests are asynchronous. Though the asynchronous has its advantages about background processing it creates a little bit of a hurdle if you need to validate the return result before moving on.
Libraries like jQuery do allow you make the call synchronous but I am not a big fan of that. While the client-server communication marriage that we call AJAX has come a long way, any interruption in this relationship will make the client browser pay a heavy price in terms of timeouts and freezes.
To make code more manageable I do the following:
//my handlers var fnLockReleasedHandler = function(event, spec){ alert('Lock status is: ' + spec.lockStatus); }; var fnReleaseLockHandler = function(event, spec){ $.get('/xxx/controller/releaseLock', {userId: spec.userId}, function(data){ $(document).trigger('lockReleased.am', [{lockStatus: data}]); }); }; //bindings $(document).bind({ 'lockReleased.am': fnLockReleasedHandler, 'releaseLock.am': fnReleaseLockHandler });
I have used ‘document’ as an example. I always prefer to bind my custom events to a high level root element. Also note that I have name-spaced my events. Good practice to follow, this way my events remain only my events.
To trigger this I can use something simple as:
$(document).trigger('releaseLock.am', [{userId: 1234}]);
This trigger calls the ‘fnReleaseLockHandler’ and that contains an AJAX call. The result of the call triggers the ‘fnLockReleasedHandler’ which brings with itself the return results.
I usually like to have an object of such custom events and their respective handlers neatly encapsulated using closures to use application wide.
All this but I have no name for it!