Yahoo UI Custom Button

Question

I have a YUI button defined through HTML markup. I managed to get it loaded and "skinned" properly.

The problem is a custom click event. I have tried a number of approaches all of which links the custom function to the 'click' event, but no matter which way I do it, it ALWAYS triggers upon page loading and then it doesn't fire when clicked. I can't seem to get it to "wait" for a user to click. It just shoots like a virgin on his first date.

Code below....

<script type="text/javascript">
    YAHOO.util.Event.onContentReady("submitbutton", onButtonReadySubmit);
    YAHOO.util.Event.onContentReady("editbutton",onButtonReadyEdit);

    var myTabs = new YAHOO.widget.TabView("demo");
    function editDoc(sBaseRef, sUNID) {
        var sNewURL = sBaseRef + "/0/" + sUNID + "?EditDocument";
        alert("Going to : " + sNewURL);
     window.location.href=sNewURL;
    }
    function onButtonReadySubmit() {
 var oSubmitButton = new YAHOO.widget.Button("submitbutton");
    }
    function onButtonReadyEdit() {
        var oEditButton = new YAHOO.widget.Button("editbutton");
        YAHOO.util.Event.addListener("editbutton", 'click', editDoc('a URL path goes here' , 'A PageKey goes here'));
    }

Answer 1

YUI Button publishes its own click event that you subscribe to on the YUI Button instance, rather than using YAHOO.util.Event.addListener. This is described in detail on the YUI Button landing page: http://developer.yahoo.com/yui/button/#handlingevents.

Answer 2

Your problem is the 3rd argument. That should be a reference to function. What happens in your code is that the 3 argument is a function that is called as the listener is being created, and returns nothing.

You have:

YAHOO.util.Event.addListener("editbutton", 'click', editDoc(
    'a URL path goes here', 
    'A PageKey goes here'
));

Simply what you want is:

YAHOO.util.Event.addListener("editbutton", 'click', editDoc);

However, you also want to pass 'a URL path goes here' and 'A PageKey goes here' to the function at click-time. To do this, use the optional fourth argument to addListener() - an object to pass to the function.

function editDoc (ev, oArgs) {
   var sBaseRef = oArgs.url,
       sUNID    = oArgs.key;

   /* code here */

}

YAHOO.util.Event.addListener("editbutton", 'click', editDoc, { 
    url: 'a URL path goes here',
    key: 'A PageKey goes here'
});

See http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_addListener for more.

As Todd mentions, you can also do this as part of the YUI Button creation - but the same issues of function versus function references apply.