jQuery event ajax dispatching

Question

In jQuery is there clever/shorthand way of tacking on an identifier to some general ajax events?

To explain, i am creating some functionality that is split between two seperate pieces of functionality: module A and module B. Module A, along with some other things, is primarily responsible for an ajax call. Module B is responsible for frontend dom work, after module a has finished and the ajax call has been returned.

I am currently simply triggering events for each of the ajax functions:

• beforeSend
• success
• complete
• error

So module has this code (among other stuff):

 $.ajax({
    url: 'myajaxurl',
    beforeSend : function() {
        $('#form').trigger('module_a_before_send');
    },
    success: function(response) {
       $('#form').trigger('module_a_success');
    },
    complete: function() {
        $('#form').trigger('module_a_complete');
    },
    error: function(textStatus) {
        $('#form').trigger('module_a_error');
    },
    timeout: 3000
});

Answer 1

You can use the data option to send a value to the serverside to identify the ajax call:

var data = if some event ? attach some value : if not attach other value etc,
    elem = $('#form');
$.ajax({
    url: 'myajaxurl',
    data: data,
    beforeSend : function() {
        elem.trigger('module_a_before_send');
    },
    success: function(response) {
       elem.trigger('module_a_success');
    },
    complete: function() {
        elem.trigger('module_a_complete');
    },
    error: function(textStatus) {
        elem.trigger('module_a_error');
    },
    timeout: 3000
});

How to catch the data depends on the serverside language used, but for something like PHP it would be in the $_POST global.

Answer 2

I'm a little confused about the problem. If you need some comunication between modules you can use the extra data parameter that you can pass to trigger (see http://api.jquery.com/trigger/ )

$(elem).trigger('my-custom-event', {id:1})

and the coresponding event handler

$(elem).bind('my-custom-event', function(event, data) {});

Another way would be to create your own custom event

var event = $.Event('my-custom-event',{id:1})
$(elem).trigger(event)

in this way you directly add the properties from the map to the jQuery event object.