In ASP.NET Web Forms I want to get control inside child Repeater with javascript

Question

I have Parent repeater which contains another child repeater. For simplicity let's say that the child repeater contains text box and Requiredvalidator.

Simple example of the markup:

<asp:Repeater ID="rpt1" runat="server">
 <HeaderTemplate>
 ....
 </HeaderTemplate>
 <ItemTemplate>
 <asp:Label ID="lbl1" runat="server" CssClass=".."></asp:Label>
 <div class="..">
 <asp:Repeater ID="rpt2" runat="server">
     <HeaderTemplate>
     </HeaderTemplate>
     <ItemTemplate>
       <div class="...">
       <asp:TextBox ID="txt21" runat="server" CssClass="..." MaxLength="7" CssClass="ErrorMessage" ErrorMessage="*" />
       <asp:RequiredFieldValidator ID="rfv21" runat="server" CssClass="ErrorMessage" ErrorMessage="*" />
       </div>
     </ItemTemplate>
     <FooterTemplate>
     </FooterTemplate>
 </asp:Repeater>
 </div>
 </ItemTemplate>
 <FooterTemplate>
 </FooterTemplate>
</asp:Repeater>

I create a method like this to get the second repeater's RequiredField id:

function getId(){

var myId = document.getElementById('<%= rfv21.ClientID %>');
}

but of course it didn't work and there was an exception:

The name control-name Does Not Exist in the Current Context

So how can i do this?

I want to mention that the business need for me is that when the onchange, onkeyup, onkeydown events fires for the txt21 it will get it's equivalent rfv21 and enbale it:

I create this method which fires for onchange, onkeyup, onkeydown events changed:

 function txt21_onChange(txtbox) {
        var newValue = this.value;
        var oldValue = this.oldvalue;
        var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
        if (newValue != oldValue) {
            ValidatorEnable(myRfv2, true); 
        }
        }

and i update txt21 to be:

<asp:TextBox ID="txt21" runat="server" CssClass=".." MaxLength="7" onkeyup="javascript: txt21_onChange(this);this.oldvalue = this.value;" />

but this line want work:

var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');

as i explained before.

I think Item.FindControl(..) may help but how can we use it in this case?

There going to be many, many `rfv21` controls - each parent repeater row is going to have as many as number of its child repeater rows. Each is going to have a generated id. Do you want to access a particular one, or all of them at once? — Andrei, Feb 06 '17 at 12:13
I want to access a particular one rfv21 when the txt21 onchange fires i want to access it's rfv21 to enable it — Marzouk, Feb 06 '17 at 12:15
Then you need to access it relatively to the txt that fired it. Do you use jquery? Will be fairly easy task with it — Andrei, Feb 06 '17 at 12:16

score 2 · Answer 1 · answered Feb 06 '17 at 13:33

You can bind the javascript function call from Repeater Repeater.ItemDataBound event.

Code Bahind

 void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e) 
 {
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
      {            
          TextBox txt21 = (TextBox)e.Item.FindControl("txt21");
          RequiredFieldValidator rfv21 = (RequiredFieldValidator)e.Item.FindControl("rfv21");
          txt21.Attributes.Add("onclick", "txt21_onChange('" + txt21.ClientID + "','" + rfv21.ClientID + "'" )            
      }
 }

Javascript

function txt21_onChange(txt21ID, rfv21ID) 
{
    txt21ID = document.getElementById(txt21ID);
    rfv21ID = document.getElementById(rfv21ID);
    //The above are TextBox and RequiredFieldValidator objects of row of TextBox that triggered change event.
    //You can use these object  
}

This also a good and acceptable answer, but i choose the another one because it will be more cleaner and easier to do that client side — Marzouk, Feb 08 '17 at 09:31

score 1 · Accepted Answer · answered Feb 06 '17 at 13:03

The problem here is that there going to be many such controls, one per each row of each child repeater. All will have slightly different generated IDs. So instead of querying them by id (impossible), you can use jQuery to quickly find them relatively to the txt that fired an event:

function txt21_onChange(txtbox) {
    var rfv2 = 
     $(textbox)           // gives you the jquery object representing the textbox
     .closest("div")      // the parent div
     .find("id*='rfv2'"); // the element you are looking for, id contains rfv2

This answers the immediate question in this thread on how to get hold of the element. But I am not sure it will solve your bigger problem of enabling/disabling validation. You cannot easily do so with server side controls in javascript. Besides, validator is not disabled by default in your code. Although I believe all this is worth a separate question here on SO>

In ASP.NET Web Forms I want to get control inside child Repeater with javascript

2 Answers2