I work on asp.net mvc . I face issue when run autocomplete but I don't know how to solve it
when run asp.net MVC application these issues display on console.log of resignation page .
resignation page inherit from layout page _LayoutResignation .
errors display on resignation page as below :
jquery-1.5.min.js:16 Uncaught Type Error: Cannot read properties of undefined (reading 'length')
at Function.each (jquery-1.5.min.js:16:10613)
at t.widget (jquery-ui.min.js:6:4729)
at jquery-ui.min.js:7:13824
at jquery-ui.min.js:6:73
at jquery-ui.min.js:6:84
bootstrap.js:15 Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4
at bootstrap.js:15:11
at bootstrap.js:17:2
datatables.min.js:176 Uncaught TypeError: l(...).on is not a function
at datatables.min.js:176:457
at datatables.min.js:60:299
at datatables.min.js:60:326
jquery.validate.unobtrusive.js:156 Uncaught TypeError: $form.off is not a function
at Object.attachValidation (jquery.validate.unobtrusive.js:156:26)
at HTMLFormElement.<anonymous> (jquery.validate.unobtrusive.js:249:26)
at Function.each (jquery-1.5.min.js:16:10828)
at init.each (jquery-1.5.min.js:16:7403)
at Object.parse (jquery.validate.unobtrusive.js:246:20)
at HTMLDocument.<anonymous> (jquery.validate.unobtrusive.js:428:28)
at Object.resolveWith (jquery-1.5.min.js:16:12509)
at Function.ready (jquery-1.5.min.js:16:8628)
at HTMLDocument.A (jquery-1.5.min.js:16:14342)
RequesterIndex?filenumber=103085:351 Uncaught ReferenceError: searchText is not defined
at HTMLInputElement.<anonymous> (RequesterIndex?filenumber=103085:351:41)
at HTMLInputElement.handle (jquery-1.5.min.js:16:28630)
at HTMLInputElement.l (jquery-1.5.min.js:16:25280)
I have layout page is main page _LayoutResignation.cshtml
<html>
<head>
<title>@ViewBag.Title - Resignation Submission Form</title>
<link href="~/Content/DataTables/datatables.min.css" rel="stylesheet" />
<link href="~/Content/animate.min.css" rel="stylesheet" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="~/Scripts/DataTables/datatables.min.js"></script>
</body>
</html>
on resignation page I implement auto complete .
All issues for console log display on resignation page console log
@model HR.WorkforceRequisition.Models.ResignationRequester
@{
Layout = "~/Views/Shared/_LayoutResignation.cshtml";
}
<form id="ResignationApp" >
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
language="javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
$(document).ready(function () {
$("#txtLineManagerId").autocomplete({
source: function (request, response) {
var searchText = $("#txtLineManagerId").val();
$.ajax({
url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")',
data: { searchText: searchText },
method: "GET",
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return { label: item.EmployeeID, value: item.EmployeeID, employeeName: item.EmployeeName };
}))
}
});
},
select: function (event, ui) {
$("#LineManagerName").val(ui.item.employeeName);
},
minLength: 4,
});
});
so How to solve issues related to jQuery and bootstrap above ?
Note jQuery version run on my application is 3.4.1 .
Updated answer
can you tell me please wrong scripts as below
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
language="javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
correct must be as below :
correct scripts will be ???
