How to reference a textbox that is inside an ItemTemplate in ASP.NET

Question

I have the following Jquery function

<script type='text/javascript'>
    $(function () {



        var msgbox = $("#status");


        $( '<%= txtCurrBlk.ClientID %>').on('keyup', function () {
            alert("The paragraph was clicked.");
            $.ajax({
                    type: "POST",


                    url: "MonthlyCopyReadings.aspx/readingTextChanged",


            data: "{}",

            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function(msg) {

                msgbox.html(msg.d);

            }

            });

        });

    });

txtCurrBlk is from the following block of code

 <asp:Repeater  runat="server" ID="rptMeterReads" > 
        <ItemTemplate>
            <tr>

                <td><%#Eval("serialNum") %></td>
                <td style="display:none"><asp:Label ID="lblMfdId" runat="server" Text='<%#Eval("mfdId") %>'/></td>
                <td><%#Eval("contractNum") %></td>
                <td><%#Eval("model") %></td>
                <td><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%#Eval("ipAddress") %>'><%#Eval("ipAddress") %></asp:HyperLink></td>
                <td><%#Eval("password") %></td>
                <td><asp:Label ID="lblPrevBlk" runat="server" Text='<%#Eval("previousBlack") %>' /></td>
                <td><asp:TextBox ID="txtCurrBlk" runat="server" style="width:80px" Text='<%#Eval("currentBlack") %>' AutoPostBack="true" /></td>
                <td><asp:Label ID="lblTotalBlk" runat="server" /> </td>
                <td><asp:Label ID="lblPrevClr" runat="server" Text='<%#Eval("previousColour") %>' /></td>
                <td><asp:TextBox ID="txtCurrClr" runat="server" style="width:80px" Text='<%#Eval("currentColour") %>' Autopostback="true" /></td>
                <td><asp:Label ID="lblTotalClr" runat="server" /> </td>
                <%--<td><asp:CheckBox ID="isColor" Checked='<%#Eval("") %>' runat="server" ReadOnly="True"/></td>--%>
            </tr>
        </ItemTemplate>
     </asp:Repeater>

I have found that I get "txtCurrBlack does not exist in its current context" if I have it inside the itemTemplate. Is there a way I can reference that textbox correctly?

score 0 · Answer 1 · answered Apr 27 '18 at 05:27

Using ClientID like <%= txtCurrBlk.ClientID %> in your issue doesn't work because each server controls inside template assigned with different ID (note that repeated or dynamically created HTML elements can't have duplicated ID) and you need to use FindControl to obtain the control in code behind, as like this:

<%= Container.FindControl("txtCurrBlk").ClientID %>

The easiest way to get the textbox element inside repeater control is by setting CssClass attribute like this:

<asp:TextBox ID="txtCurrBlk" runat="server" style="width:80px" CssClass="currBlk" Text='<%#Eval("currentBlack") %>' AutoPostBack="true" />

Since the textbox inside repeater has many element IDs, we can't use id attribute to bind events on them. Use the CSS class name as mentioned above as jQuery selector:

// n = element index
$('.currBlk').on('keyup', function () {
    alert("The paragraph was clicked.");

    // other stuff

}

Tip: You can use jQuery eq() method if you want to bind event with HTML element which has specified index.

Similar issues:

Access Repeater values using JavaScript

How to pass client id of Item in repeater to javascript

How to reference a textbox that is inside an ItemTemplate in ASP.NET

1 Answers1