Steve Fenton

<< May | June | July >>

Friday, 3rd June 2011

As you know I'm more of a jQuery guy than a YUI guy, so I don't normally find myself working on YUI in JavaScript. Similarly, I'm more of an ASP.NET MVC guy than a Web Forms guy, so I don't normally find myself working on aspx pages either.

Despite this, I have uncovered a potential problem when you combine YUI, ASP.NET Web Forms and Internet Explorer 9. If you have hit this problem, you will be experiencing the following behaviour.

• You are clicking on a button on your web form and nothing is happening
• If you put a break point in the Page_Load method, it does get hit when you press the button
• If you put a break point in the "Button_Click" method, it doesn't get hit when you press the button

And you probably have code that looks like this...

<asp:Button id="Button1" Text="Submit" OnClick="Button1_Click" runat="server" />

And some YUI that does this...

var myButton = new YAHOO.widget.Button("Button1");

This YUI script skins the button, but it results in a drastic change to your HTML. It converts this:

<input type="submit" value="Submit" name="Button1" id="SomPage_Button1">

Into something like this:

<button name="Button1-button" id="SomPage_Button1-button">Submit</button>

There are a couple of problems with this. Firstly, in some browsers this actually stops us from being able to hit enter to submit the form, which is a pain - but more importantly it breaks the post-back mechanism used in ASP.NET.

Our POST should look like this...

name=Steve&age=21&Button1=Submit

But because of the YUI changes, it looks like this in IE9:

name=Steve&age=21

The effect of this is that ASP.NET doesn't know what button you have pressed and it can't tell that you want to kick off the "Button1_Submit" method.

The simple fix for this has to be to stop using YUI and just write some CSS to style your input rather than relying on JavaScript, you shouldn't be using JavaScript to style elements anyway, what the heck were you thinking!