Multiple usercontrol instances in asp.net

Question

I have a user control with a text box. onclick text field opens a popupcontrolExtender on which there are several checkboxes. When a check box is selected, it writes the flag values ​​to the text box.

Here is my java script that does this:

 <script type = "text/javascript"> function CheckItem(checkBoxList) { var options = checkBoxList.getElementsByTagName('input'); var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); var s = ""; for (i = 0; i < options.length; i++) { var opt = options[i]; if (opt.checked) { s = s + "," + arrayOfCheckBoxLabels[i].innerText; } } if (s.length > 0) { s = s.substring(2, s.length); } var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); TxtBox.value = s; document.getElementById('<%=hidVal.ClientID %>').value = s; } </script> 

In the above js this code is var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); receives a text field and writes to it.

When I use UserControl on my aspx page, it works fine if there is only one instance of my user control. But when I add a second instance of usercontrol, the text is written only to the second instance of the text field. If I check / uncheck the boxes with the first in the first instance of the user control, still the text is added to the altest checkbox.

Can someone help me solve this problem? How to get each checkbox option so that I can change my java script?

Edit

adding full code

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiSelectDropDown.ascx.cs" Inherits="MenuTest.MultiSelectDropDown" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <script type = "text/javascript"> function CheckItem(checkBoxList) { var options = checkBoxList.getElementsByTagName('input'); var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); var s = ""; for (i = 0; i < options.length; i++) { var opt = options[i]; if (opt.checked) { s = s + "," + arrayOfCheckBoxLabels[i].innerText; } } if (s.length > 0) { s = s.substring(2, s.length); //sacar la primer 'coma' } var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); TxtBox.value = s; document.getElementById('<%=hidVal.ClientID %>').value = s; } </script> <asp:TextBox ID="txtCombo" runat="server" ReadOnly="true" Width="150" Font-Size="X-Small"></asp:TextBox> <cc1:PopupControlExtender ID="PopupControlExtender111" runat="server" TargetControlID="txtCombo" PopupControlID="Panel111" Position="Bottom" > </cc1:PopupControlExtender> <input type="hidden" name="hidVal" id="hidVal" runat="server" /> <asp:Panel ID="Panel111" runat="server" ScrollBars="Vertical" Width="150" Height="110" BackColor="AliceBlue" BorderColor="Gray" BorderWidth="1"> <asp:CheckBoxList ID="chkList" runat="server" Height="80" onclick="CheckItem(this)"> <asp:ListItem Text="Contains" Value="Contains"/> <asp:ListItem Text="Related" Value="Related"/> <asp:ListItem Text="Exact" Value="Exact"/> </asp:CheckBoxList> </asp:Panel> 

Answer 1

Each time you have an instance of your UserControl, you also re-add the javascript function. You have to add the javascript function once, so remove it from UserControl and add it to the .aspx main page and change it to something like this:

 function CheckItem(chk, txt, hid) { var tbl = chk.parentNode.parentNode.parentNode; //table with checkboxes var options = tbl.getElementsByTagName('input'); //checkboxes var arrItems = new Array(); //array for selected items for (i = 0; i < options.length; i++) { var opt = options[i]; if (opt.checked) { arrItems.push(opt.value); //if checked, push it in array } } txt.value = arrItems.join(", "); //use join to comma separate them hid.value = arrItems.join(); //comma separated without extra space } 

Now let me call the function from each flag, not from the CheckBoxList. To do this, we add an attribute each time the user clicks on the checkbox element, and not the entire control, placing it in the code behind:

 protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { foreach (ListItem li in this.chkList.Items) { li.Attributes.Add("onclick", "CheckItem(this, document.getElementById('" + txtCombo.ClientID + "'), document.getElementById('" + hidVal.ClientID + "'))"); } } } 

Finally, remove any javascript events from your CheckBoxList, as we did this in the code behind:

 <asp:CheckBoxList ID="chkList" runat="server" Height="80"> <asp:ListItem Text="Contains" Value="Contains" /> <asp:ListItem Text="Related" Value="Related" /> <asp:ListItem Text="Exact" Value="Exact" /> </asp:CheckBoxList> 

Answer 2

Another approach to this is to make the javascript function name unique to each instance of the user control. You can do this by adding the client identifier of the user element in the function name.

 function CheckItem<%=ClientID %>(checkBoxList) { 

Be sure to include the client ID when calling the function.

 Height="80" onclick="CheckItem<%=ClientID %>(this)"> 

Answer 3

Enabling your ASP and full JavaScript would be useful for me to get a clearer picture of your problem .. or at least understand where the CheckItem () call comes from.

Given this. I make assumptions with this sentence:

Can you change the caller of CheckItem () to include txtCombo.ClientID and hidVal.ClientID? similar to this:

 <script type = "text/javascript"> function CheckItem(checkBoxList, txtClientId, hidClientId) { var options = checkBoxList.getElementsByTagName('input'); var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); var s = ""; for (i = 0; i < options.length; i++) { var opt = options[i]; if (opt.checked) { s = s + "," + arrayOfCheckBoxLabels[i].innerText; } } if (s.length > 0) { s = s.substring(2, s.length); //sacar la primer 'coma' } var TxtBox = document.getElementById(txtClientId); TxtBox.value = s; document.getElementById(hidClientId).value = s; } </script> 

And your call would be something like this:

 CheckItem(checkBoxList, '<%=txtCombo.ClientID%>', '<%=hidVal.ClientID %>'); 

Answer 4

Try adding jQuery as a selector: $ ("input [id * = 'man']") will find "bigman" and "littleman"