YUI Breaks ASP|NET Pages In IE9
Friday, 3rd June 2011
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...
But because of the YUI changes, it looks like this in IE9:
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.