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?

Answer 1

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>