jQuery not working in ASP.NET

Question

jQuery not working in ASP.NET

Abdulrahman mady 0

I am using jQuery in my ASP.NET page. I was having jQuery 3.3.1.js ,

I am using visual studio 2022

I have to show a panel, and hide other one using jQuery. I am using this code:

this in site1 master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs"
    Inherits="ElibraryManagment.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
     <%-- datatable js--%>
    <script src="datatables1/js/jquery.dataTables.min.js"></script>
     <%--DatatablestrapCss--%>
    <link href="datatables1/css/jquery.dataTables.min.css" rel="stylesheet" />
      <%--JQuery.Js--%>
    <script src="bootstrap1/js/jquery-3.3.1.slim.min.js"></script>
    <%--Poper.js--%>
    <script src="bootstrap1/js/popper.min.js"></script>
    <%--bootstrap.js--%>
    <script src="bootstrap1/js/bootstrap.min.js"></script>
    
    <%--bootstrapCss--%>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
   
    <%--Font.Css--%>
    <link href="fontawesome/css/all.css" rel="stylesheet" />
    <%--Css--%>
    <link href="CSS/StyleSheet1.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

and this in my project. aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="AdminMemberManagement.aspx.cs" Inherits="ElibraryManagment.AdminMemberManagement" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
      $(document).ready(function () {
          $("#gvMemberList").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
      });
      
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

and this is my data grid view

<div class="row">
                     <div class="col">
                         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:UiccDBConnectionString %>" SelectCommand="SELECT * FROM [Member_All_Info_tbl]"></asp:SqlDataSource>
                        <asp:GridView class="table table-striped table-bordered" ID="gvMemberList" runat="server" AutoGenerateColumns="False" DataKeyNames="Member_ID" DataSourceID="SqlDataSource1">
                            <Columns>
                                <asp:BoundField DataField="FullName" HeaderText="FullName" SortExpression="FullName" />
                                <asp:BoundField DataField="DOB" HeaderText="DOB" SortExpression="DOB" />
                                <asp:BoundField DataField="National_ID" HeaderText="National_ID" SortExpression="National_ID" />
                                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
                                <asp:BoundField DataField="Goverorate" HeaderText="Goverorate" SortExpression="Goverorate" />
                                <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" />
                                <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                                <asp:BoundField DataField="Member_ID" HeaderText="Member_ID" ReadOnly="True" SortExpression="Member_ID" />
                                <asp:BoundField DataField="Achievement" HeaderText="Achievement" SortExpression="Achievement" />
                                <asp:BoundField DataField="acount_state" HeaderText="acount_state" SortExpression="acount_state" />
                            </Columns>
                         </asp:GridView>
                     </div>
                  </div>

I want to make jquey datatable appear methods have tried Many, but to no avail

Thanks !

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-13T10:07:44.3966667+00:00
Hi @Abdulrahman mady,

The reason for not working should be that the obtained id is wrong.

You can set ClientIDMode to "Static": The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains .

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.clientidmode?redirectedfrom=MSDN&view=netframework-4.8.1#fields

<asp:GridView ID="gvMemberList" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" ClientIDMode="Static">
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-17T01:59:12.94+00:00

Hi @Abdulrahman mady,

Do you have any other questions about this post?

2 answers

Your answer

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-13T10:07:44.3966667+00:00

Hi @Abdulrahman mady,

The reason for not working should be that the obtained id is wrong.

You can set ClientIDMode to "Static": The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains .

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.clientidmode?redirectedfrom=MSDN&view=netframework-4.8.1#fields

<asp:GridView ID="gvMemberList" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" ClientIDMode="Static">
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-17T01:59:12.94+00:00

Hi @Abdulrahman mady,

Do you have any other questions about this post?

Answer 1

AgaveJoe 30,126

ASP.NET Web Forms' server control IDs are dynamic. Add a code block to get the ID.

$("#<%=gvMemberList.ClientID%>").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();

Also, learn how to use the browser's developer tools (every browser has dev tools) to debug JavaScript. Dev tools has other useful tools as well. Press F12 with the browser window selected to open dev tools. Then find the "Console" which will show any JavaScript errors.

Chrome DevTools

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

Also you need to include jquery before the datatables include. Not what prepend is for.

Share via

jQuery not working in ASP.NET

2 answers

Your answer