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!