jquery function not working using Updatepanel in asp.net

Question

I am using the textbox to search a record from gridview, without update panel, the search works fine, but when i use update panel it does not.

Javascript

$(document).ready(function () {
    $('#txtSearchbox').keyup(function (event) {
        event.preventDefault();
        var searchKey = $('#txtSearchbox').val();
        $("#GridView1 tr td:nth-child(3)").each(function () {
            var cellText = $(this).text().toLowerCase();
            if (cellText.indexOf(searchKey) >= 0) {
                $(this).parent().show();
            }
            else {
                $(this).parent().hide();
            }
        });
    });
});

Grid

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
        <input type="text" id="txtSearchbox"/>
        <input type="button" id="btnsearch" value="Search"/>
        <asp:Panel ID="Panel1" ScrollBars="Vertical" Height="500px" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true"
                          Width="100%"
                          BorderColor="#DEDFDE" BorderStyle="Ridge" BorderWidth="1px" CellPadding="4"
                          Font-Size="Small" ForeColor="Black" GridLines="Vertical"
                          OnRowDataBound="GridView1_RowDataBound" OnDataBound="OnDataBound"
                          CssClass="table table-responsive table-striped table-hover" EmptyDataText="No Record Found..."
                          RowStyle-Height="7px">
                <Columns>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"
                                       HeaderStyle-Width="40px">
                        <asp:boundfield datafield="OrderID" headertext="OrderID"/>
                        <%--
                        <asp:CommandField ShowEditButton="True" ItemStyle-HorizontalAlign="Center"/>
                        <asp:CommandField ShowDeleteButton="True" ItemStyle-HorizontalAlign="Center"/>
                        --%>
                </Columns>
                <EmptyDataRowStyle Width="1195px" HorizontalAlign="Center" BackColor="#C2D69B"/>
                <RowStyle BackColor="#F7F7DE"/>
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White"/>
                <HeaderStyle Height="10px" VerticalAlign="Middle" BackColor="#6B696B" CssClass="tb_font"
                             ForeColor="White"/>
                <AlternatingRowStyle BackColor="White"/>
            </asp:GridView>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

Behemoth · Accepted Answer · 2021-08-11 13:49:18Z

1

Use keydown instead of keyup.

$(function () {
  $("[id*=txtspegqty]").keydown(function () {
    //calculate total for current row
    var val7 = $(this).val() == "" ? 0 : $(this).val();
  });
});

edited Aug 11, 2021 at 13:49

Behemoth

9,6055 gold badges28 silver badges52 bronze badges

answered Aug 11, 2021 at 6:21

HARSH ARAPLE

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Mohsin Mehmood · Accepted Answer · 2018-11-30 21:03:42Z

0

I believe you can fix this issue using any of the following two options:

Option 1

Set ClientIDMode="static" on asp:GridView element

Option 2

Update the jquery selector code like this:

$("#<%=GridView1.ClientID%> tr td:nth-child(3)")

answered Nov 30, 2018 at 21:03

Mohsin Mehmood

4,2662 gold badges15 silver badges18 bronze badges

Collectives™ on Stack Overflow

jquery function not working using Updatepanel in asp.net

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related