Why are commas inserted when innerHTML is copied after postback?

Question

This case will sound complicated, but it is not so bad. Javascript at the end of this code seems sound.

EDIT: Here the page runs on a real server. The first example does not alternate between open and closed, because I pulled out a lot of code to narrow the example to the extent I could.

http://69.64.80.239/tmp/borked2.aspx

The following client code indicates two cases. The first case is sent back when the image button is pressed, and adds a call to the large javascript function, using the clientid of the image button as an argument.

The second case just uses onClientClick and runs javascript without postback.

Both methods display and hide the text box 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 strange behavior does not happen with case number 2, which makes me think that javascript sounds in this case.

When the postback occurs, the attribute 'value = "," ", which was not there before, appears in my text box. An increasing number of commas fit into the newly added attribute.

This case is extremely limited in order to effectively identify the problem. Ultimately, this causes a view of the details in which I execute the same copy to add a comma to the beginning of each value of the form that it represents.

I am completely at a dead end, so I will just send the code as good as I can! Any ideas would be appreciated!

<h5>CASE 1: Using Serverside postback to insert Javascript into a Literal</h5> <table><tr><td> <asp:ImageButton id="CollapseExpand" runat="server" ImageUrl="/images/plus.gif" src="/images/plus.gif" AlternateText="Hide Tasks" Width="12" Height="12" onclick="CollapseExpand_Click" /> <div style="display:none"> <asp:TextBox runat="server" ID="Textbox1"></asp:TextBox> <asp:Button runat="server" ID="btnSubmit1" Text="Submit 1" /> </div> <asp:Literal runat="server" ID="ScriptAnchorTest"></asp:Literal> </td></tr></table> 

CASE 1 Codebehind

 protected void CollapseExpand_Click(object sender, ImageClickEventArgs e) { Literal l = (Literal)this.ScriptAnchorTest; l.Text = "<script type=\"text/javascript\">Expand(document.getElementById('" + this.CollapseExpand.ClientID + "'));</script>"; } 

CASE 2: Executing Javascript Clientside Directly

  <asp:ImageButton id="CollapseExpand2" runat="server" src="/images/plus.gif" AlternateText="Hide Tasks" Width="12" Height="12" onClientClick="Expand(this); return false;" /> <div style="display:none"> <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox> <asp:Button runat="server" ID="btnSubmit2" Text="Submit 2" /> </div> </td></tr></table> 

// Javascript function Expand function (image, index) {// get the image source var src = image.getAttribute ("src");

  // if src is currently "plus.", then toggle it to "minus.png" if (src.indexOf("plus") > 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 <tbody> tag of the grid var tbody = tr.parentNode; // Get a reference to the image column var td = image.parentNode; var detailnode //loop through the content of the image column. if hidden div is found, get a reference for (var j = 0; j < 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 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); } 

Answer 1

I don’t have time to read all the code, but please pay attention to the following: you can copy a piece of HTML and create a clone of this code. This way you actually get two text fields with the same identifier, although you only see one of them. Upon postback, the browser combines the values ​​in a comma-separated list. For example, if you enter "Test1" and "Test2" in the text fields, respectively, and then send, both text fields get the value twice. Now, if you only expand one of them (the first one, say), and send, only the extended one doubles again, and the one that does not expand remains the same over the reverse gears.

To solve, if you only need to show or hide the div, the best way is to do it with javascript, on the client side, changing the style (visibility) of this div, rather than cloning it. Thus, your function can be reduced to a single line of code.

Answer 2

Sergiu is right, you are creating two html entries with the same identifier "Textbox1", as you can see in the screenshot taken with Firebug

As a result, the concatenation of the two values ​​is separated by a comma.