Databases
StackOverflow2013
Postsdbo
POWhy are commas inserted when innerHTML is copied after Postback?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are commas inserted when innerHTML is copied after Postback?
    text
    copied!<p>This case is going to sound complicated, but it's not that bad. The javascript at the end of this code <em>seems</em> to be sound.</p> <p>EDIT: Here's the page running on a live server. The first example doesn't alternate between open and closed because I ripped out a lot of code in order to narrow the example down as much as I could.</p> <p><a href="http://69.64.80.239/tmp/borked2.aspx" rel="nofollow noreferrer">http://69.64.80.239/tmp/borked2.aspx</a></p> <p>There are two cases listed in the following client code. The first case posts back when an imagebutton is clicked, and adds a call to the large javascript function, using the clientid of the imagebutton as the argument.</p> <p>The second case simply uses an onClientClick, and executes the javascript without a postback.</p> <p>Both methods accomplish the display and hiding of the textbox that should appear. However, with the postback method, commas are inserted every time you go back and forth - first 1 then 3 then 7 then 15 then 31. This odd behaviour does not occur with case #2, which makes me believe that the javascript in this case is sound.</p> <p>When the postback occurs, a 'value=","' attribute appears in my textbox that was not there before. the increasing numbers of commas fit into the newly added attribute. </p> <p>This case is extremely stripped down so as to highlight the problem effectively. Ultimately this is causing a detailsview I am performing the same copy on to add a comma to the beginning of every form value that it submits.</p> <p>I'm completely stumped, so I'm just going to post the code as well as I can! Any ideas would be appreciated!</p> <pre><code>&lt;h5&gt;CASE 1: Using Serverside postback to insert Javascript into a Literal&lt;/h5&gt; &lt;table&gt;&lt;tr&gt;&lt;td&gt; &lt;asp:ImageButton id="CollapseExpand" runat="server" ImageUrl="/images/plus.gif" src="/images/plus.gif" AlternateText="Hide Tasks" Width="12" Height="12" onclick="CollapseExpand_Click" /&gt; &lt;div style="display:none"&gt; &lt;asp:TextBox runat="server" ID="Textbox1"&gt;&lt;/asp:TextBox&gt; &lt;asp:Button runat="server" ID="btnSubmit1" Text="Submit 1" /&gt; &lt;/div&gt; &lt;asp:Literal runat="server" ID="ScriptAnchorTest"&gt;&lt;/asp:Literal&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </code></pre> <p> CASE 1 Codebehind</p> <pre><code>protected void CollapseExpand_Click(object sender, ImageClickEventArgs e) { Literal l = (Literal)this.ScriptAnchorTest; l.Text = "&lt;script type=\"text/javascript\"&gt;Expand(document.getElementById('" + this.CollapseExpand.ClientID + "'));&lt;/script&gt;"; } </code></pre> <p><br> CASE 2: Executing Javascript Clientside directly </p> <pre><code> &lt;asp:ImageButton id="CollapseExpand2" runat="server" src="/images/plus.gif" AlternateText="Hide Tasks" Width="12" Height="12" onClientClick="Expand(this); return false;" /&gt; &lt;div style="display:none"&gt; &lt;asp:TextBox runat="server" ID="TextBox2"&gt;&lt;/asp:TextBox&gt; &lt;asp:Button runat="server" ID="btnSubmit2" Text="Submit 2" /&gt; &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; </code></pre> <p> // The Javascript Function function Expand(image, index) { // get the source of the image var src = image.getAttribute("src");</p> <pre><code> // if src is currently "plus.", then toggle it to "minus.png" if (src.indexOf("plus") &gt; 0) { // toggle the image image.src = image.src.replace("plus", "minus"); var tr = image.parentNode.parentNode; // Get a reference to the next row from where the image is var next_tr = tr.nextSibling; // Get a refernece to the &lt;tbody&gt; tag of the grid var tbody = tr.parentNode; // Get a reference to the image's column var td = image.parentNode; var detailnode //loop through the content of the image's column. if hidden div is found, get a reference for (var j = 0; j &lt; td.childNodes.length; j++) { if (td.childNodes[j].nodeType == 1) { if (td.childNodes[j].nodeName.toLowerCase() == 'div') { detailnode = td.childNodes[j].cloneNode(true); } } } // Create a new table row for "Expand" var newtr = document.createElement('tr'); var newtd = document.createElement('td'); var newfirsttd = newtd.cloneNode(true); /* insert an empty cell first */ newtr.appendChild(newfirsttd); newtd.colSpan = 8; // insert the hidden div's content into the new row newtd.innerHTML = detailnode.innerHTML; newtr.appendChild(newtd); tbody.insertBefore(newtr, next_tr); tr.className = "selected"; } else { image.src = src.replace("minus", "plus"); var row = image.parentNode.parentNode; var rowsibling = row.nextSibling; var rowparent = row.parentNode; rowparent.removeChild(rowsibling); } </code></pre>
 

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