I have a DataTables.Net results table (Table A) on a screen. There is a button on each row that launches a modal containing a DataTables.Net results table (Table B). The button on Table A runs JQuery in the JS file on that page which launches the modal. When I first come to the page containing Table A I can click and launch the modal containing Table B and the table populates and functions perfectly. When I close out of the modal and click on another button on Table A the modal containing Table B does launch, runs the Controller method to populate the Modal ViewModel and returns the PatialView, but Table B is not populating and doesn't ever call the AppService (specified in the listAction of the DataTable.Net table).
My attempt to troubleshoot this led me to placing a button on the Modal screen above Table B which calls the Ajax reload...which in turn dismisses the Modal and reloads the underlying page containing Table A. That "button" on the Modal DOES work on the first load above (it refreshes Table B perfectly) so I know it works.
Everything breaks down when I try to launch that Modal a second time.
Any suggestions?
4 Answer(s)
-
0
Hi @HCCNOV,
Could you share JavaScript file contents for ModalA and ModalB. To solve this, you need to realod TableB in ModalB's
this.initfunction. -
0
I really have no idea how to implement a DataTables.Net load routine in a Modal Init. Is there any examples in the base project for MVC/JQuery Core ?
Just to clarify, I only have one Modal. TableA is loaded on a regular page (non-Modal). I want to launch the Modal that contains TableB.
With the code below, the Modal pops up and the DataTables.Net result grid is empty and displays "loading" (never changes). If I change the "max entries" using the UI the results load (but the "loading" never goes away). So, I know service is connected and working, the table just isn't populating on load of modal.
My modal code:
(function ($) { app.modals.ViewDocumentsModal = function () { var _$clientnameDocumentsTable = $('#clientnameDocumentsTable'); var _customerDocumentsService = abp.services.app.customerDocuments; var _novDocumentsService = abp.services.app.novDocuments; var _$documentsForm = null; var _modalManager; var _$documentsModalFormModalForm = null; this.init = function (modalManager) { _modalManager = modalManager; var modal = _modalManager.getModal(); _$documentsForm = _modalManager.getModal().find('form[name=DocumentsModalForm]'); refreshDocumentList(); }; function refreshDocumentList() { var dataTableDocuments = _$clientnameDocumentsTable.DataTable({ paging: true, serverSide: true, processing: true, listAction: { ajaxFunction: _customerDocumentsService.getAll, inputFilter: function () { return { countyAccountNumber: $('#AccountNumber').val() }; } }, columnDefs: [ { className: 'control responsive', orderable: false, render: function () { return ''; }, targets: 0 }, { targets: 1, data: null, orderable: false, defaultContent: '', rowAction: { element: $("<div/>") .addClass("text-center") .append($("<button/>") .addClass("btn") .attr("title", app.localize("Open Document")) .append($("<i/>").addClass("la la-search")) ).click(function () { showDocument($(this).data()); }) } }, { targets: 2, data: "documentItems.fileName", name: "fileName" }, { targets: 3, data: "documentItems.classification", name: "classification" }, { targets: 4, data: "documentItems.description", name: "description" }, { targets: 5, data: "documentItems.documentMime", name: "documentMime" }, { targets: 6, data: "documentItems.source", name: "source" }, { targets: 7, data: "documentItems.dateCreated", name: "dateCreated", render: function (dateCreated) { if (dateCreated) { return moment(dateCreated).format('L'); } return ""; } }, { targets: 8, data: "documentItems.createdBy", name: "createdBy" } ] }); } function showDocument(document) { event.preventDefault(); if (document.documentItems.source == "TIFF") { _novDocumentsService.getTiff(document.countyAccountNumber) .done(function (result) { app.downloadTempFile(result); }); } else { _novDocumentsService.getDocument(document.documentItems.id) .done(function (result) { app.downloadTempFile(result); }); } } }; })(jQuery);and my view:
@using Abp.Extensions @using NOVZERO.Web.Areas.App.Models.Common.Modals @model NOVZERO.Web.Areas.App.Models.NovDocuments.ViewDocumentsModalViewModel @await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("clientnameDocuments")) @section Scripts { <script abp-src="/view-resources/Areas/App/Views/NovDocuments/_ViewDocumentsModal.js" asp-append-version="true"></script> } <div class="modal-body"> <form class="form-horizontal audit-log-detail-view" role="form" name="DocumentsModalForm"> <div class="form-body"> <input type="hidden" id="AccountNumber" value="@Model.countyAccountNumber" /> <div class="row align-items-center" style="margin-top:20px;"> <div class="col-lg-12"> <table id="clientnameDocumentsTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap"> <thead> <tr> <th></th> <th>@L("Description")</th> <th>@L("Classification")</th> <th>@L("FileType")</th> <th>@L("DateCreated")</th> <th>@L("CreatedBy")</th> </tr> </thead> </table> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">@L("Close")</button> </div> -
0
Hi @HCCNOV
Seems fine, thanks. Could you share your project with [email protected] for us to check ?
Thanks,
-
0
Thank you for the quick confirmation that my code was correctly implemented. That led me to look elsewhere. I started first by removing columns in the DataTable (and adding them back in one at a time). The problem was that Modal JS TableB had a .click function on column 1 called "showDocument" and my Index.js for TableA had a jquery function by the same name. That was causing all kinds of weirdness on the DataTables.Net control.
I renamed the method in the Modal JQuery and problem solved.
thank you.
