«

A Compilation of YUI Callback

Posted on November 23, 2007
Filed Under Javascript | 6 Comments     


I have been coding JavaScript with YUI for quite a while now. Still, I am consistently confused by various callback functions in YUI. The thing that troubled me the most was the parameters those callback functions take. The API documentation does not provide any information about this. For example, if you go to YAHOO.util.Event, under addListener method, the description for parameter fn as follow: <Function> The method the event invokes.

Yes, it's a straightforward description, but it doesn't help too much. What I really need is the signature of this callback function. For the purpose of my own use, and to benefit the community, I decided to make a compilation of callbacks in YUI.

Callback for Native Browser Events

var callback = function(e, o) {
  alert(o.msg);
}; 

YAHOO.util.Event.addListener(elemId, "click", callback, {msg: "hi"}); 

where
e - Name of the event fired.
o - Object that passed as a parameter to the callback function.

Callback for Custom Events

Depending on how the custom event is fired, the parameters that the callback function receives varies.

If the custom event is fired with parameter signature YAHOO.util.CustomEvent.LIST, which is by default, the parameters the callback function receives will be:

var callback = function(e, a, o) {
  //a is an array contains arguments fire method: arg1, arg2, ...
  //o is the object passed from the subscribe method
  alert(o.msg);
};

//to fire this event
eventObj.fire(arg1, arg2, ...);

//to listen to this event
eventObj.subscribe(callback, {msg: "hi"});

where
e - Name of this custom event.
a - Arguments that passed to the fire method of this event.
o - Object that passed as a parameter to this callback function.

If the custom event is fired with parameter signature YAHOO.util.CustomEvent.FLAT, the callback function receives two arguments:

var callback = function(a, o) {
  //a is the first argument that passed to fire method of this event
 //o is the object passed from the subscribe method
  alert(o.msg);
};

//to fire this event
eventObj.fire(arg);

//to listen to this event
eventObj.subscribe(callback, {msg: "hi"});

where
a - First argument that passed to fire method of this event
o - Object that passed as a parameter to the callback function

Callback for Connection Manager

var callback = 
{ 
  success: function(o) {//do something}, 
  failure: function(o) {//do something}, 
  argument: {name:"YUI"} 
};

This is not a callback function, rather it's a callback object that contains two callback functions. You can pass additional parameters to each callback function through argument field of this object. To access this filed inside of the callback function, use o.argument.

Above are the callbacks I can think of so far. If you have any suggestion, feel free to post it in the comment section.

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.
6 Comments so far
  1. YUI Based Lightbox - Final : Code Central February 21, 2008 9:30 pm
    [...] You can find more information on YUI's event framework here. I've also compiled a list of YUI's event handlers. [...]
  2. Ed Lincoln April 12, 2008 8:53 am
    But what is the point. What would be a real world example of passing foo and bar to handleSuccess()

    var callback =
    {
    success:handleSuccess,
    failure:handleFailure,
    argument:['foo','bar']
    };
  3. Sky April 16, 2008 7:18 am
    Good question Ed.
  4. burçlar May 23, 2008 7:47 pm
    Yea totally agree .
  5. okey May 24, 2008 5:08 am
    var callback =
    {
    success: function(o) {//do something},
    failure: function(o) {//do something},
    argument: {name:"YUI"}
    };

    awasome thanks !!!
  6. burçlar June 22, 2008 5:21 am
    thanks for information.
Code Central Special

Polls

  • Tell us who you are:

    I am a...

    View Results

    Loading ... Loading ...