Standard Event Messaging with AJAX?

Question

Are there any standards or messaging environments for AJAX?

Right now I have one page that loads content using Ajax. Since I had a complicated form for entering data as part of my content, I need to check out some events that may occur in my form. Therefore, after some adjustments due to 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 to get the 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 the success handler:

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

And on my server side, I get a JSON structure that looks like this:

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

So, loading content consists of two parts:

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

My question is: Is this a legitimate way to handle event messages on the client side, or am I on the path of suffering and pain?

Answer 1

I think it's worth a look at http://www.jboss.org/errai

Answer 2

The OpenAjax Hub (from the OpenAjax Alliance) indicates a publish / subscribe-based event hub (message bus). Take 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 think the above is more "standard".

Answer 3

I would vote for @ dan-heberden's suggestion: using api.jquery.com/ajaxComplete or api.jquery.com/ajaxSucces, e.g. for handling 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, do not accept jquery.

Answer 4

why do you want to go the path of heartache and pain by building one msg handler from scratch? if you already use js Lib, for example jQuery, and, of course, you have a complete set of sharpened blades, for example Ajax and css lib global event handlers , for example Theme Roller for the style of your messages !?

As mentioned by other SO helpers: this happens on the jQuery page:

Show message when Ajax request completes successfully.

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

Then, what can I do, possibly indicating that you are better using these tools .:

since you are not looking for a typical AJAX error, but want to use this for the purpose of validating the form, I can suggest having 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_# comes from the backend after you have confirmed all the data, if an error is detected, you send a code error via ajax, the rest is sugar!;)

PS: by doing this, you can prevent abuse as well if javascript is disabled!