Good morning all: I have some questions that the answers hopefully will help me to understand how the Jquery libraries works ( I'm just a code enthusiastic) I have a Asp.net core web application with the following _Layout.cshtml shareable view
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Web_Application_Housing</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Web_Application_Housing</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Plots" asp-action="Index">Plots</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - Web_Application_Housing - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>>
First question: are Jquery and bootstrap properly set up in my project? By default these libraries are installed in the latest versions of ASP.NET Core I heard. I have a jscript which pulls out a pop up dialog from my jquery datatable. Things get messy in the code below because I'm trying to implement an example I saw online but I'm not sure if I'm duplicating the Jquery references that are in the _Layout.cshtml shareable view . this is the jscrip code
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<style>
span.field-validation-error {
color: red;
}
</style>
</head>
<body>
<div style="width:90%; margin:0 auto" class="tablecontainer">
<a class="popup btn btn-primary" href="/home/save/0" style="margin-bottom:20px; margin-top:20px;">Add Plot</a>
<table class="table table-bordered table-striped" id="myDatatable">
<thead>
<tr>
<th scope="col">Plot</th>
<th scope="col">Status</th>
<th scope="col">Contractor</th>
<th scope="col">Inspector</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
@section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
bindDatatable();
});
function bindDatatable() {
datatable = $('#myDatatable')
.DataTable({
"ajax": {
"url":"Plots/Postdata",
"type": "POST",
"datatype": "json"
},
"serverSide": true,
"procesing":true,
"searching":true,
"order": [[1, 'asc']],
"language": {
"emptyTable": "No record found.",
"processing":
'Loading... '
},
"columns": [
{
"data": "plot", "autoWidth": true, "searchable": true
},
{
"data": "status","autoWidth": true,"searchable": true
},
{
"data": "contractor","autoWidth": true,"searchable": true
},
{
"data": "inspector","autoWidth": true,"searchable": true
},
{
"data": "idErven_Progress", "width": "50px", "render": function (data) {
return '<a class="popup" href="/Erven_Progress_Status/save/' + data + '">Edit</a>';
}
},
{
"data": "idErven_Progress", "width": "50px", "render": function (data) {
return '<a class="popup" href="/home/delete/' + data + '">Delete</a>';
}
}
],
"error": function (xhr, error, thrown)
{
alert("Error occurred while loading data. Please try again.");
}
})
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
})
function OpenPopup(pageUrl) {
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function () {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
});
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
draggable: false,
autoOpen: false,
resizable: false,
model: true,
title: 'Popup Dialog',
height: 550,
width: 600,
close: function () {
$dialog.dialog('destroy').remove();
}
})
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type: "POST",
url: url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
$dialog.dialog('close');
oTable.ajax.reload();
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
}
</script>
}
</body>
</html>
Second question; Are all these references correct and necessary ? I don't know which ones are required considering that I'm using the layout of the _Layout.cshtml ???
The jquery pop up dialog comes out with the data but the following error pops up:
Uncaught TypeError: Cannot read properties of undefined (reading 'unobtrusive')
at HTMLDivElement.<anonymous> (Plots:165:37)
at HTMLDivElement.<anonymous> (jquery-3.5.1.js:10402:14)
at Function.each (jquery-3.5.1.js:381:19)
at jQuery.fn.init.each (jquery-3.5.1.js:203:17)
at Object.<anonymous> (jquery-3.5.1.js:10401:9)
at fire (jquery-3.5.1.js:3496:31)
at Object.fireWith [as resolveWith] (jquery-3.5.1.js:3626:7)
at done (jquery-3.5.1.js:9786:14)
at XMLHttpRequest.<anonymous> (jquery-3.5.1.js:10047:9)
What I have tried:
I have searched internet without success
Submit an article or tip