20f8df1291
data tables are going to need some work yet, but the other stuff seems to be working 100%
124 lines
4.9 KiB
HTML
124 lines
4.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Subscribing to Connection Manager's Custom Events via the Callback Object</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-min.js"></script>
|
|
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style>
|
|
#container {margin-left:2em;}
|
|
</style>
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class=" yui-skin-sam">
|
|
|
|
|
|
<h1>Subscribing to Connection Manager's Custom Events via the Callback Object</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>
|
|
<a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a> exposes <a href="http://developer.yahoo.com/yui/event/#customevent">Custom Events</a> 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.
|
|
</p>
|
|
|
|
<p>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.</p>
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<form>
|
|
<input type="button" onclick="makeRequest();" value="Send a Request">
|
|
</form>
|
|
<div id="container"></div>
|
|
<script>
|
|
var div = document.getElementById('container');
|
|
|
|
var transactionObject = {
|
|
start:function(type, args){
|
|
YAHOO.log("Custom Event *start* fired for transaction" + args[0].tId + ".", "info", "example");
|
|
div.innerHTML = "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
|
|
},
|
|
|
|
complete:function(type, args){
|
|
YAHOO.log("Custom Event *complete* fired for transaction" + args[0].tId + ".", "info", "example");
|
|
div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
|
|
},
|
|
|
|
success:function(type, args){
|
|
YAHOO.log("Custom Event *success* fired for transaction" + args[0].tId + ".", "info", "example");
|
|
div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event 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){
|
|
YAHOO.log("Custom Event *failure* fired for transaction" + args[0].tId + ".", "info", "example");
|
|
div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event 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){
|
|
YAHOO.log("Custom Event *abort* fired for transaction" + args[0].tId + ".", "info", "example");
|
|
div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
|
|
}
|
|
};
|
|
|
|
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>";
|
|
};
|
|
|
|
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"]
|
|
};
|
|
|
|
function makeRequest(){
|
|
var sUrl = "assets/get.php?s=hello%20world";
|
|
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
|
|
};
|
|
</script>
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|