client side search textbox using jquery from asp.net gridview function not working

Question

i want to search order id from jquery function client side using asp.net gridview , but jquery function not calls and not search order id from grid view. any expert can help what is wrong in my code, and how to resolve this problem. I have shared whole code.

HTML

  <asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Search" />

GridView

<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>

jquery Function

<script type="text/javascript">
$(document).ready(function() {

      $('#Button1').click(function(event) {
         event.preventDefault();
         var searchKey = $('#txtSearchBox').val();
         $("#GridView1 tr td:nth-child(2)").each(function() {
            var cellText = $(this).text().toLowerCase();
            if (cellText.indexOf(searchKey) >= 0) {
                  $(this).parent().show();
            }
            else {
                $(this).parent().hide();
            }
          });
       });
});
</script>

first of all test on your Chrome console that $("#GridView1 tr td:nth-child(2)") is returning your expected values — CREM, Nov 30 '18 at 14:08
empty show. i want to search only orderid column how can i do this in js. @Crying Freeman — ZEESHAN AKRAM, Nov 30 '18 at 14:20
Post your RENDERED html since that is what jQuery will work with. Consider adding a class to the element. — Mark Schultheiss, Nov 30 '18 at 15:00
You probably do NOT want `runat="server"` on the button here perhaps? — Mark Schultheiss, Nov 30 '18 at 15:06

Aristos · Answer 1 · 2018-11-30T15:27:49.807

0

Every id on your code, it maybe rendered different at the page.

so to use it on the client side JavaScript you must to render it as it will be render by asp.net

For example, to capture the text box

<asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

you must use this kind or id render on Javascript <%=txtSearchBox%> and your code will be like:

var searchKey = $('#<%=txtSearchBox.ClientID%>').val();

So you need to do the same for all controls that you call on javascript.

related
Accessing control client name and not ID in ASP.NET
How to get asp.net client id at external javascript file
access c# variable in javasciprt file .js

edited Nov 30 '18 at 15:27

answered Nov 30 '18 at 14:43

Aristos

66,005
16
114
150

That would require you embed the JavaScript on the page which is not really the best practice in all situations (any?) – Mark Schultheiss Nov 30 '18 at 15:08
1

Don't you mean `<%= txtSearchBox.ClientID %>`? – VDWWD Nov 30 '18 at 15:08
@VDWWD Yes - my mistake (bug) do many thinks at the same time – Aristos Nov 30 '18 at 15:21
@MarkSchultheiss Start from the easy understanding code - then maybe the one that try to find whats going on - make some better optimized way. – Aristos Nov 30 '18 at 15:23
@MarkSchultheiss If understands and find the base of the cause - then its may use for example the class name to locate the controls.. – Aristos Nov 30 '18 at 15:25

CREM · Answer 2 · 2018-11-30T14:57:27.173

0

This Jquery selector should return all your td (n) objects

$("#tableBottomRight tbody tr td:nth-child(2)").each(function(){ console.log($(this).text().toLowerCase())});

check the real structure of your Grid. If you don't get any value Your problem is Your server-side code or your Jquery library is not loaded on the right place

edited Nov 30 '18 at 14:57

answered Nov 30 '18 at 14:50

CREM

1,929
1
25
35

score 0 · Accepted Answer · answered Nov 30 '18 at 15:18

Try adding a class to the element, then use it for example:

$("#GridView1").find('tbody').find('.class-on-element').each(function() {

$(function() {
  $('#Button1').on('click', function(event) {
    event.preventDefault();
    var searchKey = $('#txtSearchBox').val();
    $("#GridView1").find('.class-on-element').each(function() {
      //may not need toLowerCase
      var textMatch = ($(this).text().toLowerCase().indexOf(searchKey) >= 0);
      $(this).closest('tr').toggle(textMatch);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

score -1 · Answer 4 · answered Nov 30 '18 at 14:06

-1

Use ClientIDMode="Static" then try to access id in script

answered Nov 30 '18 at 14:06

Geetesh

317
2
12

Search value not shows in grid view when i use breakpoint js value show in SearchKey var but search value does not show in gridview. @Geetesh – ZEESHAN AKRAM Nov 30 '18 at 14:16

client side search textbox using jquery from asp.net gridview function not working

4 Answers4