YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Connection Manager: Subscribing to Connection Manager's Custom Events via the Callback Object

# Connection Manager: Subscribing to Connection Manager's Custom Events via the Callback Object

Connection Manager exposes Custom Events that track the progress of a transaction throughout its lifecycle. These Custom Events are raised at the global level and at the transaction level. The following code example provides a step-by-step approach to subscribing to transactional Custom Events raised by Connection Manager. In this scenario, an event handler object is created to handle all of the Custom Events; this event handler object is passed to Connection Manager in the callback object. Connection Manager will automatically subscribe to the events and fire the specified events.

Click "Send a Request" below to try it out, then read the description below to learn how to subscribe to transactional Custom Events in Connection Manager.

View example in new window.

## Subscribing to Connection Manager's Custom Events via the Callback Object

### Source file and dependencies

Load the Yahoo Global Object and Connection Manager source files:

<script src="yahoo.js"></script> <script src="event.js"></script> <script src="connection.js"></script>

### Create an Event Handler Object

Create an object to handle all the custom events fired by Connection Manager.

var div = document.getElementById('container'); var transactionObject = { start:function(type, args){ div.innerHTML = "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; }, complete:function(type, args){ div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; }, success:function(type, args){ div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; if(args[0].responseText !== undefined){ div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>"; div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>"; div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>"; div.innerHTML += "<li>HTTP headers: " + args[0].getAllResponseHeaders + "<li>"; div.innerHTML += "<li>Server response: " + args[0].responseText + "<li>"; div.innerHTML += "<li>Argument object: Array ( [foo] => " + args[0].argument[0] +" [bar] => " + args[0].argument[1] +" )<li>"; } }, failure:function(type, args){ div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; if(args[0].responseText !== undefined){ div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>"; div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>"; div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>"; } }, abort:function(type, args){ div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; } };

Let's create two functions to provide handlers for `callback.success` and `callback.failure` compatibility. The inclusion of these handlers will demonstrate their backward compatibility with Custom Events.

var handleSuccess = function(o){ div.innerHTML += "<li>Success response handler triggered in callback.success<li>"; }; var handleFailure = function(o){ div.innerHTML += "<li>Failure response handler triggered in callback.success<li>"; };

Subscribe to the transaction custom events fired by Connection Manager by creating a `customevents` object in the callback object. NOTE: callback.success and callback.failure are provided here to demonstrate backward compatibility, and would be redundant to customevents.onSuccess and customevents.onFailure, respectively.

var callback = { success:handleSuccess, failure:handleFailure, customevents:{ onStart:transactionObject.start, onComplete:transactionObject.complete, onSuccess:transactionObject.success, onFailure:transactionObject.failure, onAbort:transactionObject.abort }, argument:["foo","bar"] };

### Initiate the Transaction

Call `YAHOO.util.Connect.asyncRequest` to make a request to `get.php`, and PHP will return the contents of `$_GET` via `print_r()`. Each event handler in `transactionObject` will be triggered in response to its custom event(e.g., transactionObject.start will be called when startEvent fires). In this example, event handlers are created and subscribed to all possible events raised by Connection Manager.

var sUrl = "php/get.php?s=hello%20world"; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Connection Manager Examples:

- Connection Manager GET Transaction
- Connection Manager POST Transaction
- Connection Manager Transaction Timeout
- Retrieving a Yahoo! Weather RSS Feed
- Cross-Domain Transactions with Connection Manager
- Subscribing to Connection Manager Global Events
- Subscribing to Connection Manager's Custom Events via the Callback Object
- Connection Manager assisted image crop (included with examples for ImageCropper Control (beta))
- Dynamically Loading Node Data (included with examples for TreeView Control)
- Editor Data Post with Connection Manager (included with examples for Rich Text Editor)
- Simple Application (included with examples for Layout Manager)

### More Connection Manager Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings