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;"> </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;">
</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="Chai";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="Chang";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="Outback Lager";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="Flotemysost";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="Mozzarella di Giovanni";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="Röd Kaviar";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="Longlife Tofu";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="Rhönbräu Klosterbier";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="Lakkalikööri";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="Original Frankfurter grüne Soße";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.
2 answers
solution1
1 2011-04-15 13:09:26
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();")
solution2
0 2011-10-03 13:20:39
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
browserCapssection to yourweb.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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
IE9 Javascript Error :: Undefined/Null
IE9 Javascript error
IE9 Javascript Undefined Variables
JavaScript variable not is undefined in IE9
ie9 - FormData undefined - javascript
IE9 javascript undefined errors
IE9 javascript error when variable is null or undefined
Console is undefined error in IE9
ie9 Error: 'Blob' is undefined
'Date' is undefined in IE9 in javascript loaded by FacePile
Related Tags