I have a partial view (list view of items) that launches another partial view (also a list view of items) from the context menu. When the second partial view is initially launched everything works as expected. The appservice.GetAll() is called and the second list view is populated with the results. However when I close the second partial view and relaunch the second partial view the appservice.GetAll() is not called and the list in the partial view is empty. Please explain what is happening and how to resolve. Below are the files involved.
The initial page is the Positions index view. This page is the standard list page generated using the RadTool. The index.js file has been modified as follows: (function () { $(function () {
var _$positionsTable = $('#PositionsTable');
var _positionsService = abp.services.app.positions;
$('.date-picker').datetimepicker({
locale: abp.localization.currentLanguage.name,
format: 'L'
});
var _permissions = {
create: abp.auth.hasPermission('Pages.Administration.Positions.Create'),
edit: abp.auth.hasPermission('Pages.Administration.Positions.Edit'),
'delete': abp.auth.hasPermission('Pages.Administration.Positions.Delete')
};
var _createOrEditModal = new app.ModalManager({
viewUrl: abp.appPath + 'Sapphire/Positions/CreateOrEditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Sapphire/Views/Positions/_CreateOrEditModal.js',
modalClass: 'CreateOrEditPositionModal'
});
var _viewPositionModal = new app.ModalManager({
viewUrl: abp.appPath + 'Sapphire/Positions/ViewpositionModal',
modalClass: 'ViewPositionModal'
});
var _indexPositionQualificationModal = new app.ModalManager({
viewUrl: abp.appPath + 'Sapphire/PositionQualifications/_IndexModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Sapphire/Views/PositionQualifications/_IndexModal.js',
modalClass: 'PositionQualificationsViewModel'
});
var getDateFilter = function (element) {
if (element.data("DateTimePicker").date() == null) {
return null;
}
return element.data("DateTimePicker").date().format("YYYY-MM-DDT00:00:00Z");
}
var dataTable = _$positionsTable.DataTable({
paging: true,
serverSide: true,
processing: true,
listAction: {
ajaxFunction: _positionsService.getAll,
inputFilter: function () {
return {
filter: $('#PositionsTableFilter').val(),
nameFilter: $('#NameFilterId').val()
};
}
},
columnDefs: [
{
width: 120,
targets: 0,
data: null,
orderable: false,
autoWidth: false,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-brand dropdown-toggle',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [
{
text: app.localize('View'),
action: function (data) {
_viewPositionModal.open({ id: data.record.position.id });
}
},
{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_createOrEditModal.open({ id: data.record.position.id });
}
},
{ // NEW CONTEXT MENU OPTION - launches second list view
text: app.localize('Qualifications'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_indexPositionQualificationModal.open({ id: data.record.position.id });
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deletePosition(data.record.position);
}
}]
}
},
{
targets: 1,
data: "position.name",
name: "name"
},
{
targets: 2,
data: "position.qualificationNames",
name: "qualifications"
}
]
});
function getPositions() {
dataTable.ajax.reload();
}
function deletePosition(position) {
abp.message.confirm(
'',
app.localize('AreYouSure'),
function (isConfirmed) {
if (isConfirmed) {
_positionsService.delete({
id: position.id
}).done(function () {
getPositions(true);
abp.notify.success(app.localize('SuccessfullyDeleted'));
});
}
}
);
}
$('#ShowAdvancedFiltersSpan').click(function () {
$('#ShowAdvancedFiltersSpan').hide();
$('#HideAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideDown();
});
$('#HideAdvancedFiltersSpan').click(function () {
$('#HideAdvancedFiltersSpan').hide();
$('#ShowAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideUp();
});
$('#CreateNewPositionButton').click(function () {
_createOrEditModal.open();
});
abp.event.on('app.createOrEditPositionModalSaved', function () {
getPositions();
});
$('#GetPositionsButton').click(function (e) {
e.preventDefault();
getPositions();
});
$(document).keypress(function(e) {
if(e.which === 13) {
getPositions();
}
});
});
})();
The list view that gets launched from the "Qualifications" context menu and its associated javascript file are below:
@using Sapphire.Authorization @using Sapphire.Web.Areas.Sapphire.Models.PositionQualifications @using Sapphire.Web.Areas.Sapphire.Startup @using Sapphire.Web.Areas.Sapphire.Models.Common.Modals @model PositionQualificationsViewModel @{ ViewBag.CurrentPageName = SapphirePageNames.Common.PositionQualifications; } @section Scripts { <script abp-src="/view-resources/Areas/Sapphire/Views/PositionQualifications/_IndexModal.js" asp-append-version="true"></script> }
<input type="hidden" id="id" name="id" value="@Model.PositionId" />
@await Html.PartialAsync("~/Areas/Sapphire/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("Qualifications") + " for " + ViewBag.PositionName))
<div class="modal-body" id="IndexModal"> <div class="kt-subheader__toolbar"> <div class="kt-subheader__wrapper"> @if (IsGranted(AppPermissions.Pages_Administration_PositionQualifications_Create)) { <button id="CreateNewPositionQualificationButton" class="btn btn-primary blue"><i class="fa fa-plus"></i> @L("CreateNewPositionQualification")</button> } </div> </div> <div class="row align-items-center"> <table id="PositionQualificationsTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap"> <thead> <tr> <th>@L("Actions")</th> <th>@L("QualificationName")</th> <th>@L("RequirementLevel")</th> </tr> </thead> </table> </div> <div class="align-bottom"> <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-hidden="true" id="CloseModalButton">@L("Done")</button> </div> </div>
(function () { $(function () {
var _$positionQualificationsTable = $('#PositionQualificationsTable');
var _positionQualificationsService = abp.services.app.positionQualifications;
$('.date-picker').datetimepicker({
locale: abp.localization.currentLanguage.name,
format: 'L'
});
var _permissions = {
create: abp.auth.hasPermission('Pages.Administration.PositionQualifications.Create'),
edit: abp.auth.hasPermission('Pages.Administration.PositionQualifications.Edit'),
'delete': abp.auth.hasPermission('Pages.Administration.PositionQualifications.Delete')
};
var _createOrEditModal = new app.ModalManager({
viewUrl: abp.appPath + 'Sapphire/PositionQualifications/CreateOrEditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Sapphire/Views/PositionQualifications/_CreateOrEditModal.js',
modalClass: 'CreateOrEditPositionQualificationModal'
});
var _viewPositionQualificationModal = new app.ModalManager({
viewUrl: abp.appPath + 'Sapphire/PositionQualifications/ViewpositionQualificationModal',
modalClass: 'ViewPositionQualificationModal'
});
var getDateFilter = function (element) {
if (element.data("DateTimePicker").date() == null) {
return null;
}
return element.data("DateTimePicker").date().format("YYYY-MM-DDT00:00:00Z");
}
var itmId = $('#id').val();
var dataTable = _$positionQualificationsTable.DataTable({
paging: true,
serverSide: true,
processing: true,
listAction: {
ajaxFunction: _positionQualificationsService.getAllForPosition,
inputFilter: function () {
return {
filter: $('#PositionQualificationsTableFilter').val(),
positionNameFilter: $('#PositionNameFilterId').val(),
qualificationNameFilter: $('#QualificationNameFilterId').val(),
requirementLevelFilter: $('#RequirementLevelFilterId').val(),
positionId: itmId
};
}
},
columnDefs: [
{
width: 120,
targets: 0,
data: null,
orderable: false,
autoWidth: false,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-brand dropdown-toggle',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [
{
text: app.localize('View'),
action: function (data) {
_viewPositionQualificationModal.open({ id: data.record.positionQualification.id, positionId: itmId });
}
},
{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_createOrEditModal.open({ id: data.record.positionQualification.id, positionId: itmId});
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deletePositionQualification(data.record.positionQualification);
}
}]
}
},
{
targets: 1,
data: "qualificationName",
name: "qualificationFk.name"
},
{
targets: 2,
data: "positionQualification.requirementLevel",
name: "requirementLevel",
render: function (requirementLevel) {
return app.localize('Enum_RequirementLevels_' + requirementLevel);
}
}
]
});
function getPositionQualifications() {
dataTable.ajax.reload();
}
function deletePositionQualification(positionQualification) {
abp.message.confirm(
'',
app.localize('AreYouSure'),
function (isConfirmed) {
if (isConfirmed) {
_positionQualificationsService.delete({
id: positionQualification.id
}).done(function () {
getPositionQualifications(true);
abp.notify.success(app.localize('SuccessfullyDeleted'));
});
}
}
);
}
$('#ShowAdvancedFiltersSpan').click(function () {
$('#ShowAdvancedFiltersSpan').hide();
$('#HideAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideDown();
});
$('#HideAdvancedFiltersSpan').click(function () {
$('#HideAdvancedFiltersSpan').hide();
$('#ShowAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideUp();
});
$('#CreateNewPositionQualificationButton').click(function () {
_createOrEditModal.open({ id: null, positionId: itmId });
});
// closes the modal and returns to the Positions list view modal
$('#CloseModalButton').click(function () {
$('#IndexModal').close;
});
abp.event.on('app.createOrEditPositionQualificationModalSaved', function () {
getPositionQualifications();
});
$('#GetPositionQualificationsButton').click(function (e) {
e.preventDefault();
getPositionQualifications();
});
$(document).keypress(function (e) {
if (e.which === 13) {
getPositionQualifications();
}
});
});
})();
1 Answer(s)
-
0
Hi,
Can you check if the script file of your modal is loaded when you open it second time ?
Thanks,
