StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POASP.NET Passing ClientID to javascript causes slow rendering in IE
text
Body
copied!<p>I have a web user control containing several textboxes. Some of those textboxes have javascript click events.</p> <pre><code><%@ Control Language="VB" AutoEventWireup="false" CodeFile="myControl.ascx.vb" Inherits="myControl" ClassName="myControl" %> <script type="text/javascript"> function textbox1_Click(textbox1, textbox2, textbox3, textbox4) { //processing } function textbox2_Click(textbox1, textbox2, textbox3, textbox4) { //processing } function textbox3_Click(textbox1, textbox2, textbox3, textbox4) { //processing } function textbox4_Click(textbox1, textbox2, textbox3, textbox4) { //processing } </script> <div> <asp:TextBox ID="textbox1" runat="server"></asp:TextBox> <asp:TextBox ID="textbox2" runat="server"></asp:TextBox> <asp:TextBox ID="textbox3" runat="server"></asp:TextBox> <asp:TextBox ID="textbox4" runat="server"></asp:TextBox> </div> </code></pre> <p>In the code behind I add the click events like so.</p> <pre><code>Partial Class myControl Inherits System.Web.UI.UserControl Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load textbox1.Attributes.Add("onClick", "textbox1_Click(" & textbox1.ClientID & ", " & textbox2.ClientID & ", " & textbox3.ClientID & ", " & textbox4.clientID & ");") textbox2.Attributes.Add("onClick", "textbox2_Click(" & textbox1.ClientID & ", " & textbox2.ClientID & ", " & textbox3.ClientID & ", " & textbox4.clientID & ");") textbox3.Attributes.Add("onClick", "textbox3_Click(" & textbox1.ClientID & ", " & textbox2.ClientID & ", " & textbox3.ClientID & ", " & textbox4.clientID & ");") textbox4.Attributes.Add("onClick", "textbox4_Click(" & textbox1.ClientID & ", " & textbox2.ClientID & ", " & textbox3.ClientID & ", " & textbox4.clientID & ");") End Sub End Class </code></pre> <p>Now I have a page that has a large amount of these controls added to it via a place holder.</p> <pre><code>For x as Integer = 0 to 300 Dim newRow As myControl = LoadControl("myControl.ascx") myPlaceHolder.Controls.Add(newRow) Next </code></pre> <p>The problem is this page is very slow to render in IE. The page is taking about 10 seconds to render in IE9. You can watch as the user controls progressively get rendered on the page and IE is nearly unresponsive until the rendering is complete. I tried IE8 and it was even slower. Firefox and Chrome of course load instantly. </p> <p>I found that this performance issue is directly related to passing the clientID's to the javascript functions. If I remove the passing of all variables to the click events it loads fine in IE.</p> <pre><code>Public Class myControl Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load textbox1.Attributes.Add("onClick", "textbox1_Click();") textbox2.Attributes.Add("onClick", "textbox2_Click();") textbox3.Attributes.Add("onClick", "textbox3_Click();") textbox4.Attributes.Add("onClick", "textbox4_Click();") End Sub End Class </code></pre> <p>I tried getting the the clientID's in the javascript functions themselves like so.</p> <pre><code>var mytextbox = document.getElementById('<%= textbox1.ClientID %>'); </code></pre> <p>This doesn't work, it always gives me the ID from the last dynamically added user control. </p> <p>Is there anyway I can get this to render in IE in a reasonable amount of time? Maybe there is another way to achieve what Im doing? Thanks for any help!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload