PDA

View Full Version : Bug in Button widget for 0.33 release



grEvenX
18 Dec 2006, 2:11 PM
Thanks for a really great library.
I've hade a bit of struggle keeping a good structure in my JavaScript code when using the library, but I think that's mostly the case of me being unfamiliar with too muck JavaScript coding...

When using the Button widget (YAHOO.ext.Button) without assigning a handler, and instead using the addListener method, the javascript debugger complains about a javascript error:
"this.handler has no properties"

I guess there's something in the code that doesn't check wether an handler is set or not...

tryanDLS
18 Dec 2006, 2:14 PM
Are you adding a handler to a valid event? (e.g. click not onclick). Do you have a scoping issue - is 'this' what you think it is?

Can you post a code sample?

grEvenX
18 Dec 2006, 2:33 PM
I think this sample code should be sufficient...

HTML:

<div id="myTestButton"></div>

Javascript code:

yuiBtn = new YAHOO.ext.Button('myTestButton', {text: "Next"});
yuiBtn.on('click', myOnClickFunction);

var myOnClickFunction = function(btn, evtObject) {
alert("test");
}

tryanDLS
18 Dec 2006, 2:55 PM
Not sure if that code is all in one method, but you might try

yuiBtn.on('click', this.myOnClickFunction)

You might also want to pass the 3rd,4th args above (....yuiBtn, true)

If you stop in the debugger in the click event, you'll probably see that 'this' is the window, not your method, so this.handler doesn't point to anything. You'll also see whether doing it your way with 2 args is sufficient to get the right values passed as btn, evtObject to your method.

grEvenX
18 Dec 2006, 3:24 PM
Just wanted to note that replacing:

yuiBtn.on('click', myOnClickFunction);

with the following line gets rid of the message:

yuiBtn.handler = {
call: myOnClickFunction
};

jack.slocum
18 Dec 2006, 6:44 PM
The problem was two fold. One, a bug in the lib when handler is null (it used to only support handler, so it was assuming it would be there). The updated version is in SVN, or you can include this somewhere after yui-ext:


YAHOO.ext.Button.prototype.onClick : function(e){
e.preventDefault();
if(!this.disabled){
this.fireEvent('click', this, e);
if(this.handler){
this.handler.call(this.scope || this, this, e);
}
}
}

The second problem is you are passing your function reference before the function is defined:

yuiBtn = new YAHOO.ext.Button('myTestButton', {text: "Next"});
yuiBtn.on('click', myOnClickFunction); <-- myOnClickFunction = undefined

var myOnClickFunction = function(btn, evtObject) {
alert("test");
}