IE9 Javascript undefined error

Question

I'm getting a javascript error in IE9 that I'm not getting in Chrome or FF, and I can't figure out a good way to solve it. The code does work in Compatibility Mode.

In the example code, I've got a custom user control that consists of a few basic controls and an AJAX modelpopupextender. A listview populates some products, and I attach an onclick event onitemdatabound that populates a label and closes the modelpopup to each htmlrow of the listview items.

IE9 can't find Button2, and fails to complete the javascript function. Current versions of Chrome and FF perform as intended. Is there something I'm missing?

Source:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="SelectProduct.ascx.vb" Inherits="SelectProduct" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<style type="text/css">
.modalBackground 
{
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
</style>
<asp:Panel ID="Panel1" runat="server" BackColor="Wheat">    
    <table style="padding:5px;">
        <tr>
            <td style="width:40px;">&nbsp;</td>
            <td style="width:400px;text-align:center;">
                <b style="font-size:12pt;color:#155184;">Select a Product</b>
            </td>
            <td style="width:40px;text-align:right;">
                <asp:Button ID="Button2" runat="server" Text="X" CausesValidation="false" />
            </td>
        </tr>
    </table>
    <asp:Panel ID="Panel2" runat="server" Height="500" ScrollBars="Auto" BackColor="White">
        <table style="padding:5px;">
            <tr>
                <td colspan="3">
                    <asp:ListView ID="ListView1" runat="server" DataSourceID="sqlProducts" DataKeyNames="productid, productname">
                        <LayoutTemplate>
                            <table cellpadding="4" cellspacing="0" style="width:480px;border:solid 1px #cccccc;" rules="all">
                                <tr>
                                    <th style="width:100px;">ID</th>
                                    <th style="width:280px;">Name</th>
                                    <th style="width:100px;">Price</th>
                                </tr>
                                <tr id="itemPlaceHolder" runat="server"></tr>
                            </table>
                        </LayoutTemplate>
                        <ItemTemplate>
                                <tr id="selectedProduct" runat="server" style="cursor:pointer;">
                                    <td style="width:100px;text-align:center;">
                                        <asp:Label ID="lblID" runat="server" Text='<%# Eval("productid") %>' />
                                    </td>
                                    <td style="width:280px;text-align:center;">
                                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("productname") %>' />
                                    </td>
                                    <td style="width:100px;padding-left:4px;">
                                        <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("unitprice") %>' />
                                    </td>
                                </tr>
                        </ItemTemplate>
                    </asp:ListView>
                    <asp:SqlDataSource ID="sqlProducts" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:Northwind %>" 
                        SelectCommand="select productid, productname, unitprice from products">
                    </asp:SqlDataSource>
                </td>
            </tr>
        </table>  
    </asp:Panel>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Select a Product..." CausesValidation="false" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" 
    PopupControlID="Panel1" TargetControlID="Button1" CancelControlID="Button2">
</asp:ModalPopupExtender>

Code:

Partial Class SelectProduct
    Inherits System.Web.UI.UserControl

    Protected Sub ListView1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles ListView1.ItemDataBound

        Dim row As HtmlTableRow = CType(e.Item.FindControl("selectedProduct"), HtmlTableRow)
        Dim product As String = ListView1.DataKeys(CType(e.Item, ListViewDataItem).DataItemIndex).Values(1).ToString()
        Dim id As String = ListView1.DataKeys(CType(e.Item, ListViewDataItem).DataItemIndex).Values(0).ToString()
        row.Attributes.Add("onclick", Label1.ClientID + ".innerText=""" + product + """;" + Button2.ClientID + ".click();")

    End Sub
End Class

Generated HTML:

<div>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
    <div id="SelectProduct1_Panel1" style="background-color: Wheat;">
        <table style="padding: 5px;">
            <tr>
                <td style="width: 40px;">
                    &nbsp;
                </td>
                <td style="width: 400px; text-align: center;">
                    <b style="font-size: 12pt; color: #155184;">Select a Product</b>
                </td>
                <td style="width: 40px; text-align: right;">
                    <input type="submit" name="SelectProduct1$Button2" value="X" id="SelectProduct1_Button2" />
                </td>
            </tr>
        </table>
        <div id="SelectProduct1_Panel2" style="background-color: White; height: 500px; overflow: auto;">
            <table style="padding: 5px;">
                <tr>
                    <td colspan="3">
                        <table cellpadding="4" cellspacing="0" style="width: 480px; border: solid 1px #cccccc;"
                            rules="all">
                            <tr>
                                <th style="width: 100px;">
                                    ID
                                </th>
                                <th style="width: 280px;">
                                    Name
                                </th>
                                <th style="width: 100px;">
                                    Price
                                </th>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl0_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Chai&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl0_lblID">1</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl0_lblName">Chai</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl0_lblPrice">18.0000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl1_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Chang&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl1_lblID">2</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl1_lblName">Chang</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl1_lblPrice">19.0000</span>
                                </td>
                            </tr>                                
                            <tr id="SelectProduct1_ListView1_ctrl69_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Outback Lager&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl69_lblID">70</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl69_lblName">Outback Lager</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl69_lblPrice">15.0000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl70_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Flotemysost&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl70_lblID">71</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl70_lblName">Flotemysost</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl70_lblPrice">21.5000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl71_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Mozzarella di Giovanni&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl71_lblID">72</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl71_lblName">Mozzarella di Giovanni</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl71_lblPrice">34.8000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl72_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Röd Kaviar&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl72_lblID">73</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl72_lblName">Röd Kaviar</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl72_lblPrice">15.0000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl73_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Longlife Tofu&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl73_lblID">74</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl73_lblName">Longlife Tofu</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl73_lblPrice">10.0000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl74_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Rhönbräu Klosterbier&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl74_lblID">75</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl74_lblName">Rhönbräu Klosterbier</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl74_lblPrice">7.7500</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl75_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Lakkalikööri&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl75_lblID">76</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl75_lblName">Lakkalikööri</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl75_lblPrice">18.0000</span>
                                </td>
                            </tr>
                            <tr id="SelectProduct1_ListView1_ctrl76_selectedProduct" style="cursor: pointer;"
                                onclick="SelectProduct1_Label1.innerText=&quot;Original Frankfurter grüne Soße&quot;;SelectProduct1_Button2.click();">
                                <td style="width: 100px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl76_lblID">77</span>
                                </td>
                                <td style="width: 280px; text-align: center;">
                                    <span id="SelectProduct1_ListView1_ctrl76_lblName">Original Frankfurter grüne Soße</span>
                                </td>
                                <td style="width: 100px; padding-left: 4px;">
                                    <span id="SelectProduct1_ListView1_ctrl76_lblPrice">13.0000</span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <input type="submit" name="SelectProduct1$Button1" value="Select a Product..." id="SelectProduct1_Button1" />
    <span id="SelectProduct1_Label1"></span>
</div>

UPDATE:

Ok, I found a workaround. I added a js function that performs the processes.

<script type="text/javascript">
    function selectProduct(prodName) {
        document.getElementById('<%= Label1.ClientID %>').innerText = prodName;
        document.getElementById('<%= Button2.ClientID %>').click();
    }
</script>

...

Dim row As HtmlTableRow = CType(e.Item.FindControl("selectedProduct"), HtmlTableRow)
Dim lblName As Label = e.Item.FindControl("lblName")
Dim product As String = ListView1.DataKeys(CType(e.Item, ListViewDataItem).DataItemIndex).Values(1).ToString()
Dim id As String = ListView1.DataKeys(CType(e.Item, ListViewDataItem).DataItemIndex).Values(0).ToString()
row.Attributes.Add("onclick", "selectProduct(" + lblName.ClientID + ".innerText);")

The only issue is that I'll either have to only place one of this user control per page, or register the client script server-side with a unique function name for each control.

At least I got it to work.

What HTML is generated for FF/Chrome? asp.net guesses what browser you have and adapts the HTML it generates. You may need an updated browser capabilities file for IE9 in standards mode. — lambacck
– lambacck, Commented Apr 15, 2011 at 13:06

lambacck · Accepted Answer · 2011-04-15 13:09:26Z

1

You might want to try changing:

row.Attributes.Add("onclick", Label1.ClientID + ".innerText=""" + product + """;" + Button2.ClientID + ".click();")

to:

row.Attributes.Add("onclick", Label1.ClientID + ".innerText=""" + product + """;document.getElementById(""" + Button2.ClientID + """).click();")

answered Apr 15, 2011 at 13:09

lambacck

9,9463 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rozwel Over a year ago

Can't swear that this is the answer to this specific problem but I have experienced some similar bugs that were solved this way. To the point that GetElementByID is now my standard approach.

Andy Over a year ago

I did try that, but it did not fix the issue. IE9 still cant't find Button2.

13xforever · Accepted Answer · 2011-10-03 13:20:39Z

I have similar problem with custom WebControl. I traced the problem back to ASP.NET.

In short, ASP.NET doesn't know about IE9 browser ID, thus returning default compatibility flags, including EcmaScriptVersion (see System.Web.HttpContext.Current.Request.Browser), which turns off script generation in base class.

I really hoped that they'll update .net after IE9 release, but no.

These are (independent) solutions that I was using to circumvent this annoyance:

Turn on compatibility view on the page with control (see X-UA-Compatible), preferably as meta tag to force page reload;

Add browserCaps section to your web.config (this will effectively turn on cookies and javascript for all browsers):

<configuration>
    <system.web>
        <browserCaps>
            <use var="HTTP_USER_AGENT" />
            browser=Unknown
            cookies=true
            javascript=true
            ecmascriptversion=1.0
        </browserCaps>
    </system.web>
</configuration>

Find how to force the control to generate the required scripts no matter what (this one is still pending).

Collectives™ on Stack Overflow

IE9 Javascript undefined error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related