Global Event Registry with JQuery

Question

I am developing a heavily AJAX-based web app in JQuery that includes many GUI components. There are some application states that affect all GUI components.

E.g. while an AJAX request is executed, I want my toolbar buttons to "freeze" and not trigger any click events until the request finished. The same applies to my slider control and some draggable GUI components.

To ease the transition between the app states, I want to develop a global event registry that offers the following features:

• each gui component can register, remove, trigger its events within the registry
• the ability to suspend events (i.e. unbind them while my app state is in a certain state and then automatically rebind them)
• match app states to gui behaviours (e.g. in drawing mode, only the "Exit drawing mode" button is active)

Does anyone know about jQuery plugins that could assist me?

Answer 1

I will tackle the register, triggering and unbinding of custom events.

jQuery has all the tools you need to register, bind and unbind to custom events.

Below is an example of hooking up two divs to a custom event called customAjaxStart. I can then trigger this function and both handlers will get called.

Quick Demo Here - Have the firebug/ie8 console enabled.

e.g

$( function() {

  $('#div1').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  $('#div2').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  //fire the custom event
  $.event.trigger('customAjaxStart');

  //unbind div1 from custom event
  $('#div1').unbind('customAjaxStart');

  //again trigger custom event - div1 handler will not fire this time
 $.event.trigger('customAjaxStart'); 
});

Taking the above as an example I would trigger the customAjaxStart from the global ajaxStart. Any listeners would be triggered automatically whenever an xhr call is about to be made (ideal for disabling your widgets or showing a loading gif etc) e.g

$.ajaxStart( function(){

    $.event.trigger('customAjaxStart');

});