I want to call java script after clicking <a> tag in my partial view, it is working for the first time but second time after using ajax and rendering my partial view, it doesn't go to <a> tag event. let just show my code to let you grasp it better. this is my parent view:
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
@{
ViewData["Title"] = "RegisteredNurseList";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
// LOT OF HTML TAG CODE HERE I JUST IGNOR THEM...
<section id="table-transactions">
<!-- datatable start -->
<div id="nursesList">
<partial name="PaginatedNurses" model="Model" />
</div>
<!-- datatable ends -->
</div>
</section>
@section modalSection
{
<script>
window.$(document).ready(function () {
window.$('#RegisteredNursePaginated').find('a[href]').on('click',
function (e) {
e.preventDefault();
var sortOrder = window.$("#sortOrder").val();
var sortType = window.$("#sortType").val();
var minAge = window.$("#minAge").val();
var maxAge = window.$("#maxAge").val();
var page = getQueryStringValue(this, 0).replace('page=', '');
// window.$("#pageGetter").val(page);
debugger;
console.log(this);
window.$.ajax({
url: "/admin/RegisteredNurseList/",
type: 'GET',
data: {
page: page,
SortOrder: sortOrder,
sortType: sortType,
MinAge: minAge,
MaxAge: maxAge
},
success: function (result) {
debugger;
window.$('#RegisteredNursePaginated').html(result);
}
});
return false;
});
});
</script>
}
as you see I am using <partial name="PaginatedNurses" model="Model" /> to call partial view. and this is my PaginatedNurses partial view :
@using Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
<body>
<form>
<div id="RegisteredNursePaginated">
<div class="form-group row">
<div class="col-md-3">
از سن <input class="form-control" id="minAge" type="number" name="MinAge" value="@ViewBag.MinAge" />
</div>
<div class="col-md-3">
تا سن <input class="form-control" id="maxAge" type="number" name="MaxAge" value="@ViewBag.MaxAge" />
</div>
<div class="col-md-3">
مرتب سازی بر اساس
<select class="form-control" name="SortOrder" value="@ViewBag.SortOrder" style="width: 200px" id="sortOrder">
<option value="age">
سن
</option>
<option value="registerDate">
زمان ثبت نام
</option>
</select>
</div>
<div class="col-md-3">
نحوه مرتب سازی
<select class="form-control" name="SortType" value="@ViewBag.SortType" style="width: 200px" id="sortType">
<option value=1>
صعودی
</option>
<option value=0>
نزولی
</option>
</select>
</div>
</div>
<input type="submit" value="جست و جو" id="btnSearch" />
<div class="table-responsive">
<table id="table-extended-transactions" class="table mb-0">
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شماره پروانه کار</th>
@*<th>شماره ملی</th>*@
<th>دوره حرفه ای</th>
<th>تاریخ ثبت نام</th>
</tr>
</thead>
<tbody>
@foreach (var nurse in Model)
{
<tr>
<td><i class="bx bxs-circle success font-small-1 mr-50 align-middle"></i><span>@nurse.FullName</span></td>
<td class="text-bold-700">@nurse.Age</td>
<td class="text-bold-700">@nurse.NurseSystemNumber</td>
<td>
@nurse.ProfessionalCourseDescription
</td>
<td>
@nurse.SubmissionDatePersian
</td>
<td>
<div class="dropdown">
<span class="bx bx-dots-horizontal-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
</span>
<div class="dropdown-menu">
<a class="dropdown-item" href="@Url.Action("NurseDetails", "Admin", new {id = @nurse.Id})"><i class="bx bx-edit-alt mr-1"></i> نمایش جزئیات</a>
<a class="dropdown-item" onclick="setInvitation('@nurse.Id')">تایید</a>
<a class="dropdown-item" onclick="refuseRegister('@nurse.Id')"><i class="bx bx-trash mr-1"></i>عدم تایید</a>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
<div id="pager">
<input value="1" type="hidden" id="pageGetter"/>
@Html.PagedListPager((IPagedList) Model, page =>
Url.Action("RegisteredNurseList",
new
{
page = page,
SortOrder = ViewBag.SortOrder,
SortType = ViewBag.SortType,
MaxAge = ViewBag.MaxAge,
MinAge = ViewBag.MinAge
}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
new AjaxOptions() {HttpMethod = "GET", UpdateTargetId = "RegisteredNursePaginated"}))
</div>
</div>
</div>
</form>
</body>
as you witness there is html tag helper @Html.PagedListPager((IPagedList) Model,... this is using <a> tag. I Mean after clicking on this, it is going to parent modelSection:
<script>
window.$(document).ready(function () {
window.$('#RegisteredNursePaginated').find('a[href]').on('click',
function (e) {
e.preventDefault();
var sortOrder = window.$("#sortOrder").val();
var sortType = window.$("#sortType").val();
var minAge = window.$("#minAge").val();
var maxAge = window.$("#maxAge").val();
var page = getQueryStringValue(this, 0).replace('page=', '');
// window.$("#pageGetter").val(page);
debugger;
console.log(this);
window.$.ajax({
url: "/admin/RegisteredNurseList/",
type: 'GET',
data: {
page: page,
SortOrder: sortOrder,
sortType: sortType,
MinAge: minAge,
MaxAge: maxAge
},
success: function (result) {
debugger;
window.$('#RegisteredNursePaginated').html(result);
}
});
return false;
});
});
</script>
it works first time but after using ajax and rendering it by controller, it will never go to that part again after clicking <a> tag. this is my controller:
public async Task<IActionResult> RegisteredNurseList(int? page, int? sortType, string sortOrder,
int? minAge, int? maxAge)
{
bool isAjax = HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest";
ViewBag.PageNumber = page ?? 1;
int pageSize = 2;
int skip = (ViewBag.PageNumber - 1) * pageSize;
ViewBag.MinAge = minAge ?? 18;
ViewBag.MaxAge = maxAge ?? 99;
ViewBag.SortType = sortType ?? 1;
ViewBag.SortOrder = sortOrder ?? "age";
var tuple = await _admin.GetNurses(skip, pageSize, sortOrder ?? "age", sortType ?? 1, minAge ?? 18, maxAge ?? 99);
int total = tuple.Item2;
var nurses = tuple.Item1;
var result = new StaticPagedList<NurseDetailsViewModel>(nurses, ViewBag.PageNumber, pageSize, total);
if (isAjax)
{
return (ActionResult)PartialView("PaginatedNurses", result);
}
return View(result);
}