A standard event messaging system with AJAX?

Question

Is there any standards or messaging framework for AJAX?

Right now I have a single page that loads content using Ajax. Because I had a complex form for data entry as part of my content, I need to validate certain events that can occur in my form. So after some adjustments driven by my tests:

asyncShould("search customer list click", 3, function() {
    stop(1000);
    $('#content').show();
    var forCustomerList = newCustomerListRequest();
    var forShipAndCharge = newShipAndChargeRequest(forCustomerList);

    forCustomerList.page = '../../vt/' + forCustomerList.page;
    forShipAndCharge.page = 'helpers/helper.php';
    forShipAndCharge.data = { 'action': 'shipAndCharge', 'DB': '11001' };

    var originalComplete = forShipAndCharge.complete;

    forShipAndCharge.complete = function(xhr, status) {
        originalComplete(xhr, status);
        ok($('#customer_edit').is(":visible"), 'Shows customer editor');
        $('#search').click();
        ok($('#customer_list').is(":visible"), 'Shows customer list');
        ok($('#customer_edit').is(":hidden"), 'Does not show customer editor');
        start();
    };

    testController.getContent(forShipAndCharge);
});

Here is the controller for getting content:

    getContent: function (request) {
        $.ajax({
            type:       'GET',
            url:        request.page,
            dataType:   'json',
            data:       request.data,
            async:      request.async,
            success:    request.success,
            complete:   request.complete
        });
    },

And here is the request event:

function newShipAndChargeRequest(serverRequest) {
var that = {
    serverRequest: serverRequest,
    page: 'nodes/orders/sc.php',
    data: 'customer_id=-1',
    complete: errorHandler,
    success: function(msg) {
        shipAndChargeHandler(msg);
        initWhenCustomer(that.serverRequest);
    },
    async: true
};
return that;

}

And here is a success handler:

function shipAndChargeHandler(msg) {
    $('.contentContainer').html(msg.html);
    if (msg.status == 'flash') {
        flash(msg.flash);
    }
}

And on my server side I end up with a JSON structure that looks like this:

$message['status'] = 'success';
$message['data'] = array();
$message['flash'] = '';
$message['html'] = '';
echo json_encode($message);

So now loading content consists of two parts:

• HTML, this is the presentation of the form.
• DATA, this is any data that needs be loaded for the form
• FLASH, any validation or server errors
• STATUS tells client what happened on server.

My question is: Is this a valid way to handle event messaging on the client-side or am I going down a path of heartache and pain?

Answer 1

I think this is worth looking at http://www.jboss.org/errai

Answer 2

The OpenAjax Hub (from the OpenAjax Alliance) specifies a publish/subscribe-based event hub (topic bus). Have a look at the open-source reference implementation: http://openajaxallianc.sourceforge.net/.

TIBCO also has an event bus implemented in JavaScript called PageBus but I guess the above is more "standard".

Answer 3

I would vote for the suggestion by @dan-heberden: using api.jquery.com/ajaxComplete or api.jquery.com/ajaxSucces, like for example the following to handle ajax events with jquery.

$('.contentContainer').ajaxSuccess(function(e, xhr, settings) {
  var msg.html = "<p>You did it!</p>";
  shipAndChargeHandler(msg);
});

No frameworks needed for your problem I believe, accept jquery itself.

Answer 4

why you want go down a path of heartache and pain by builting one msg handler from scratch? if you already are using a js Lib like jQuery, and of course, you have a complete set of sharpened blades like Global Ajax Event Handlers and a css lib like Theme Roller for style your messages!?

As already mentioned by other SO mates: this come from the jQuery page:

Show a message when an Ajax request completes successfully.

$("#msg").ajaxSuccess(function(evt, request, settings){
      $(this).append("<li>Successful Request!</li>");
      });

Then, what i can do, is maybe, pointing you to use better this tools es.:

since you are not looking for a typical AJAX error, but you want use this for form validation purpose, i can suggest to have something like this:

$.ajaxComplete(function(event, xhr, options) {
    var data = xhr.responceText;
    switch(data) {
    case 'err_1': 
    // do_something(1)
    break;
    case 'err_2': 
    // do_something(2)
    break;
    case 'err_3': 
    // do_something(3)
    break; 
    }
});

Where each err_# come from backend after you have validated all data, if error found, you send via ajax the code error the rest is sugar! ;)

PS: by doing this you can prevent abuse also if javascript is disabled!