makumbi says:
<script type="text/javascript" src="../Scripts/Jquery-3.5.1.js"></script>
You need to load the jQuery library before using the script.
You have referenced the $ inside the script tag, but added the jQuery script reference after the script has been loaded.
Here is your modified HTML. I have arranged the script files.
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="Subcodes.aspx.vb" Inherits="SLISWEB2023.Subcodes1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<style type="text/css">
.auto-style1 { width: 100%; border-collapse: collapse; border-style: solid; border-width: 2px; background-color: #00FFFF; }
.auto-style2 { background-color: #FFFFFF; }
.auto-style3 { width: 100%; }
.auto-style23 { height: 12px; }
body { font-family: Arial; font-size: 10pt; }
.modalBackground { background-color: Black; filter: alpha(opacity=40); opacity: 0.4; }
.modalPopup { background-color: #FFFFFF; width: 300px; border: 3px solid #0DA9D0; }
.modalPopup .header { background-color: #2FBDF1; height: 30px; color: White; line-height: 30px; text-align: center; font-weight: bold; }
.modalPopup .body { min-height: 50px; line-height: 30px; text-align: center; padding: 5px; }
.modalPopup .footer { padding: 3px; }
.modalPopup .button { height: 23px; color: White; line-height: 23px; text-align: center; font-weight: bold; cursor: pointer; background-color: #9F9F9F; border: 1px solid #5C5C5C; }
.modalPopup td { text-align: left; }
.auto-style70 { width: 224px; height: 22px; }
.auto-style71 { color: #FF5050; }
</style>
<script type="text/javascript" src="../Scripts/Jquery-3.5.1.js"></script>
<script type="text/javascript" src="../Scripts/Jquery.datatables.min.js"></script>
<script type="text/javascript" src="../Scripts/datatable.fixedColumns.min.js"></script>
<link href="../Scripts/Jquery.datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=StockbooksGrid]").DataTable(
{
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true
});
});
function Showalert() {
alert('Call JavaScript function from codebehind');
}
function askConfirm(msg) {
alert(msg)
}
</script>
<body>
<script type="text/javascript">
$(function () {
$('#StockbooksGrid tfoot tr').appendTo('#StockbooksGrid thead');
$('#StockbooksGrid').removeAttr('width').DataTable({
bLengthChange: true,
lengthMenu: [[15, 20, -1], [15, 20, "All"]],
bFilter: true,
bSort: true,
scrollCollapse: true,
paging: true,
fixedColumns: false,
orderCellsTop: true
});
});
</script>
<div>
<table class="auto-style1">
<tr>
<td>
<asp:Button ID="Button2" runat="server" Text="Back To Menu" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4" class="auto-style2">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="StockbooksGrid" runat="server" AutoGenerateColumns="False" Width="1307px" ShowFooter="True">
<Columns>
<asp:ButtonField CommandName="Editbook" Text="Edit " />
<asp:TemplateField HeaderText="CallNo">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("bookcode") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Callno" runat="server" Text='<%# Bind("bookcode") %>' Width="73px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Callno" runat="server" Text='<%# Bind("bookcode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("bookname") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fbookname" runat="server" Text='<%# Bind("bookcode") %>' Width="349px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="BookName" runat="server" Text='<%# Bind("bookname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Author">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("author") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fauthor" runat="server" Text='<%# Bind("bookcode") %>' Width="210px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Author" runat="server" Text='<%# Bind("author") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Subject">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("category") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" Height="27px" Width="243px" DataSourceID="bksubjects" DataTextField="subject" DataValueField="subject" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="bksubjects" runat="server" ConnectionString="<%$ ConnectionStrings:SLISConnectionString %>" SelectCommand="SELECT [subject] FROM [subjects]"></asp:SqlDataSource>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Subject" runat="server" Text='<%# Bind("category") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EntryCode">
<EditItemTemplate>
<asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("autofield") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button1" runat="server" Text="Add New" OnClick="Button1_Click" />
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Entrycode" runat="server" Text='<%# Bind("autofield") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Publisher">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Publisher") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Publisher" runat="server" Text='<%# Bind("Publisher") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Year Published" Visible="False">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Yearpublished") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="YearPublished" runat="server" Text='<%# Bind("Yearpublished") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ISBN" Visible="False">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("ISBN") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="ISBN" runat="server" Text='<%# Bind("ISBN") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edition">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("Editions") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Editions" runat="server" Text='<%# Bind("Editions") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table class="auto-style3">
<tr>
<td class="auto-style23">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" AutoPostBack="True">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem>Import Books From Excel</asp:ListItem>
<asp:ListItem>Batch Transfer Accession numbers</asp:ListItem>
<asp:ListItem>Transfer Selected Accession numbers</asp:ListItem>
<asp:ListItem Value="Delete Single Accesssion No">Delete Single Accesssion No</asp:ListItem>
<asp:ListItem>Transfer Single Accession numbers</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Currentusertxt" runat="server" Text="Current Username"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnYes" />
<asp:PostBackTrigger ControlID="btnNo" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground"
CancelControlID="btnCancel">
</cc1:ModalPopupExtender>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
<asp:Button ID="btnCancel" runat="server" Text="X" Style="float: right;" />
</div>
<div class="body">
<asp:Label ID="lblMessage" runat="server" Text="" />
<br />
</div>
<div class="footer" style="text-align: center;">
<asp:Button ID="btnYes" runat="server" Text="Yes" OnClick="OnYes" />
<asp:Button ID="btnNo" runat="server" Text="No" OnClick="OnNo" />
</div>
</asp:Panel>
</div>
<script type="text/javascript">
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$('[id$=StockbooksGrid]').prepend($("<thead></thead>").append($('[id$=StockbooksGrid]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
}
});
};
</script>
</asp:Content>
