Saturday, July 28

How to find a control inside a repeater using JQuery.


My Repeater Control:


<asp:Repeater ID="RepeaterLeaveStatus" runat="server">
                <ItemTemplate>
                    <asp:HiddenField ID="hdnLeaveTypeID" runat="server" Value='<%#Bind("Leave_Type_ID") %>' />
                    <table class="repeater" cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="3" class="repeater_td_header">
                                <asp:Label ID="lblLeaveType" runat="server" Text='<%#Bind("Leave_Type_Name") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr class="repeater_tr_content">
                            <td style="width: 50%; padding-left: 3%">
                                <b>Allocated</b>
                            </td>
                            <td style="width: 4%">
                                <b>:</b>
                            </td>
                            <td style="width: 40%; text-align: left;">
                                <asp:Label ID="lblAllocated" runat="server" Text='<%#Bind("Allocated_Days") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr class="repeater_tr_content">
                            <td style="width: 50%; padding-left: 3%">
                                <b>Leaves Taken</b>
                            </td>
                            <td style="width: 4%">
                                <b>:</b>
                            </td>
                            <td style="width: 40%; text-align: left;">
                                <asp:Label ID="lblTaken" runat="server" Text='<%#Bind("No_Of_Days") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr class="repeater_tr_content" style="background-color: #90EE90">
                            <td style="width: 50%; padding-left: 3%">
                                <b>Available</b>
                            </td>
                            <td style="width: 4%">
                                <b>:</b>
                            </td>
                            <td style="width: 40%; text-align: left;">
                                <asp:Label ID="lblAvailable" runat="server" Text='<%#Bind("Available_Days") %>'></asp:Label>
                                <asp:HiddenField ID="HdnAvailableDays" runat="server" Value='<%#Bind("Available_Days") %>' />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
              
            </asp:Repeater>
Design View:
Now I have written a Jquery method to find the hidded field value present inside repeater control when a dropdownlist's selected item changes.
My JQuery Method:

$("#ddlLeaveType").change(function () {
                var repeater = $('table.repeater').length  //will return the no of items present in the repeater.
                for (i = 0; i < repeater; i++) {

                    if ($("#RepeaterLeaveStatus_hdnLeaveTypeID_" + i).val() == $("#ddlLeaveType").val()) {
                        var Available = document.getElementById("RepeaterLeaveStatus_HdnAvailableDays_" + i + "").value;
                        $("#hdnAvailable").val(Available);
                    }
                }
            });

$("#RepeaterLeaveStatus_hdnLeaveTypeID_" + i) returns the hidden field present in the ith item of the repeater.

Thanks 

    Shibashish Mohanty

1 comment:

Please don't spam, spam comments is not allowed here.

.

ShibashishMnty
shibashish mohanty