Message when tryning to reload DataTable #11958

0

Bernard created 8 months ago

Additional infos

0

ismcagdas created 8 months ago

Support Team

Hi @Bernard

Did you update DataTables version ?

0

Bernard created 8 months ago

No Should I ? Besides I noticed that the version is old how to do / should we update it

0

m.aliozkaya created 8 months ago

Support Team

Hi @Bernard,

We have completed our work on the Datatable 2.0 update. You can reach the updated version of Datatable when version 13.2.0 is released by updating it.

I don't think this error is related to that. Can you run yarn create-bundles? Does the error happen on a specific page or all the datatable pages?

0

Bernard created 8 months ago

Hi Its possible to upgrade to the last version and upgrade my previous project version 13.0.0 using WinMerge ? Or different way ?

0

m.aliozkaya created 8 months ago

Support Team

Yes, you can use WinMerge for upgrading. The new version is announced on GitHub and social media accounts when it is released. Wait for the announcement.

0

Bernard created 8 months ago

Hi @Bernard,

We have completed our work on the Datatable 2.0 update. You can reach the updated version of Datatable when version 13.2.0 is released by updating it.

I don't think this error is related to that. Can you run yarn create-bundles? Does the error happen on a specific page or all the datatable pages?

No this error only appears on 1 datatable

here is the code on the index.js file

` (function () { $(function () {

    var _$conventionsTable = $('#ConventionsTable');
    var _conventionsService = abp.services.app.conventions;

    var $selectedDate = {
        startDate: null,
        endDate: null,
    }

    $('.date-picker').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY'));
    });

    $('.startDate').daterangepicker({
        autoUpdateInput: false,
        singleDatePicker: true,
        locale: abp.localization.currentLanguage.name,
        format: 'L',
    })
        .on("apply.daterangepicker", (ev, picker) => {
            $selectedDate.startDate = picker.startDate;
            getConventions();
        })
        .on('cancel.daterangepicker', function (ev, picker) {
            $(this).val("");
            $selectedDate.startDate = null;
            getConventions();
        });

    $('.endDate').daterangepicker({
        autoUpdateInput: false,
        singleDatePicker: true,
        locale: abp.localization.currentLanguage.name,
        format: 'L',
    })
        .on("apply.daterangepicker", (ev, picker) => {
            $selectedDate.endDate = picker.startDate;
            getConventions();
        })
        .on('cancel.daterangepicker', function (ev, picker) {
            $(this).val("");
            $selectedDate.endDate = null;
            getConventions();
        });

    var _permissions = {
        create: abp.auth.hasPermission('Pages.Conventions.Create'),
        edit: abp.auth.hasPermission('Pages.Conventions.Edit'),
        'delete': abp.auth.hasPermission('Pages.Conventions.Delete')
    };

    var _createOrEditModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Conventions/CreateOrEditModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Conventions/_CreateOrEditModal.js',
        modalClass: 'CreateOrEditConventionModal'
    });


    var _viewConventionModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Conventions/ViewconventionModal',
        modalClass: 'ViewConventionModal'
    });




    var getDateFilter = function (element) {
        if ($selectedDate.startDate == null) {
            return null;
        }
        return $selectedDate.startDate.format("YYYY-MM-DDT00:00:00Z");
    }

    var getMaxDateFilter = function (element) {
        if ($selectedDate.endDate == null) {
            return null;
        }
        return $selectedDate.endDate.format("YYYY-MM-DDT23:59:59Z");
    }

    var dataTable = _$conventionsTable.DataTable({
        paging: true,
        serverSide: true,
        processing: true,
        listAction: {
            ajaxFunction: _conventionsService.getAll,
            inputFilter: function () {
                return {
                    filter: $('#ConventionsTableFilter').val(),
                    minDateFilter: getDateFilter($('#MinDateFilterId')),
                    maxDateFilter: getMaxDateFilter($('#MaxDateFilterId')),
                    referenceFilter: $('#ReferenceFilterId').val(),
                    numConvFilter: $('#NumConvFilterId').val(),
                    personDisplayPropertyFilter: $('#PersonDisplayPropertyFilterId').val()
                };
            }
        },
        columnDefs: [
            {
                className: 'control responsive',
                orderable: false,
                render: function () {
                    return '';
                },
                targets: 0
            },
            {
                width: 120,
                targets: 1,
                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) {
                                _viewConventionModal.open({ id: data.record.convention.id });
                            }
                        },
                        {
                            text: app.localize('Edit'),
                            visible: function () {
                                return _permissions.edit;
                            },
                            action: function (data) {
                                _createOrEditModal.open({ id: data.record.convention.id });
                            }
                        },
                        {
                            text: app.localize('Delete'),
                            visible: function () {
                                return _permissions.delete;
                            },
                            action: function (data) {
                                deleteConvention(data.record.convention);
                            }
                        }]
                }
            }
            , {
                className: 'details-control',
                targets: 2,
                orderable: false,
                autoWidth: false,
                visible: abp.auth.hasPermission('Pages.LigneConventions'),
                render: function () {
                    return `&lt;button class=&quot;btn btn-light-primary font-weight-bold mr-2 btn-sm Edit_LigneConvention_ConventionId&quot;&gt;${app.localize("EditLigneConvention")}&lt;/button&gt;`;
                }
            }
            ,
            {
                targets: 3,
                data: "convention.date",
                name: "date",
                render: function (date) {
                    if (date) {
                        return moment(date).format('L');
                    }
                    return "";
                }

            },
            {
                targets: 4,
                data: "personDisplayProperty",
                name: "personFk.displayProperty"
            },
            {
                targets: 5,
                data: "convention.reference",
                name: "reference"
            },
            {
                targets: 6,
                data: "convention.numConv",
                name: "numConv"
            },
            {
                targets: 7,
                data: 'convention.totalHT',
                name: 'totalHT',
                render: $.fn.dataTable.render.number(',', ',', 2)
            },
            {
                targets: 8,
                data: "convention.modePaiement",
                name: "modePaiement",
                render: function (modePaiement) {
                    return app.localize('Enum_ModePaiement_' + modePaiement);
                }

            },

          
        ]
    });

    function getConventions() {
        dataTable.ajax.reload();
    }

    function deleteConvention(convention) {
        abp.message.confirm(
            '',
            app.localize('AreYouSure'),
            function (isConfirmed) {
                if (isConfirmed) {
                    _conventionsService.delete({
                        id: convention.id
                    }).done(function () {
                        getConventions(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();
    });

    $('#CreateNewConventionButton').click(function () {
        _createOrEditModal.open();
    });

    $('#ExportToExcelButton').click(function () {
        _conventionsService
            .getConventionsToExcel({
                filter: $('#ConventionsTableFilter').val(),
                minDateFilter: getDateFilter($('#MinDateFilterId')),
                maxDateFilter: getMaxDateFilter($('#MaxDateFilterId')),
                referenceFilter: $('#ReferenceFilterId').val(),
                numConvFilter: $('#NumConvFilterId').val(),
                personDisplayPropertyFilter: $('#PersonDisplayPropertyFilterId').val()
            })
            .done(function (result) {
                app.downloadTempFile(result);
            });
    });

    abp.event.on('app.createOrEditConventionModalSaved', function () {
        getConventions();
    });

    $('#GetConventionsButton').click(function (e) {
        e.preventDefault();
        getConventions();
    });

    $(document).keypress(function (e) {
        if (e.which === 13) {
            getConventions();
        }
    });

    $('.reload-on-change').change(function (e) {
        getConventions();
    });

    $('.reload-on-keyup').keyup(function (e) {
        getConventions();
    });

    $('#btn-reset-filters').click(function (e) {
        $('.reload-on-change,.reload-on-keyup,#MyEntsTableFilter').val('');
        getConventions();
    });


    var currentOpenedDetailRow;
    function openDetailRow(e, url) {
        var tr = $(e).closest('tr');
        var row = dataTable.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            currentOpenedDetailRow = null;
        } else {
            if (currentOpenedDetailRow)
                currentOpenedDetailRow.child.hide();

            $.get(url).then((data) => {
                row.child(data).show();
                tr.addClass('shown');
                currentOpenedDetailRow = row;
            });
        }
    }


    _$conventionsTable.on('click', '.Edit_LigneConvention_ConventionId', function () {
        var tr = $(this).closest('tr');
        var row = dataTable.row(tr);
        openDetailRow(this, "/App/MasterDetailChild_Convention_LigneConventions?ConventionId=" + row.data().convention.id);
    });


});

})();

`

0

Bernard created 8 months ago

or perhaps the masterdetail datatable , i'm not sure

the code is :

`(function () { $(function () {

    var _$ligneConventionsTable = $('#MasterDetailChild_Convention_LigneConventionsTable');
    var _ligneConventionsService = abp.services.app.ligneConventions;

    var $selectedDate = {
        startDate: null,
        endDate: null,
    }

    $('.date-picker').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY'));
    });

    $('.startDate').daterangepicker({
        autoUpdateInput: false,
        singleDatePicker: true,
        locale: abp.localization.currentLanguage.name,
        format: 'L',
    })
        .on("apply.daterangepicker", (ev, picker) => {
            $selectedDate.startDate = picker.startDate;
            getLigneConventions();
        })
        .on('cancel.daterangepicker', function (ev, picker) {
            $(this).val("");
            $selectedDate.startDate = null;
            getLigneConventions();
        });

    $('.endDate').daterangepicker({
        autoUpdateInput: false,
        singleDatePicker: true,
        locale: abp.localization.currentLanguage.name,
        format: 'L',
    })
        .on("apply.daterangepicker", (ev, picker) => {
            $selectedDate.endDate = picker.startDate;
            getLigneConventions();
        })
        .on('cancel.daterangepicker', function (ev, picker) {
            $(this).val("");
            $selectedDate.endDate = null;
            getLigneConventions();
        });

    var _permissions = {
        create: abp.auth.hasPermission('Pages.LigneConventions.Create'),
        edit: abp.auth.hasPermission('Pages.LigneConventions.Edit'),
        'delete': abp.auth.hasPermission('Pages.LigneConventions.Delete')
    };

    var _createOrEditModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/MasterDetailChild_Convention_LigneConventions/CreateOrEditModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/MasterDetailChild_Convention_LigneConventions/_CreateOrEditModal.js',
        modalClass: 'MasterDetailChild_Convention_CreateOrEditLigneConventionModal'
    });


    var _viewLigneConventionModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/MasterDetailChild_Convention_LigneConventions/ViewligneConventionModal',
        modalClass: 'MasterDetailChild_Convention_ViewLigneConventionModal'
    });




    var getDateFilter = function (element) {
        if ($selectedDate.startDate == null) {
            return null;
        }
        return $selectedDate.startDate.format("YYYY-MM-DDT00:00:00Z");
    }

    var getMaxDateFilter = function (element) {
        if ($selectedDate.endDate == null) {
            return null;
        }
        return $selectedDate.endDate.format("YYYY-MM-DDT23:59:59Z");
    }

    var dataTable = _$ligneConventionsTable.DataTable({
        paging: true,
        serverSide: true,
        processing: true,
        listAction: {
            ajaxFunction: _ligneConventionsService.getAll,
            inputFilter: function () {
                return {
                    filter: $('#MasterDetailChild_Convention_LigneConventionsTableFilter').val(),
                    //intituleFilter: $('#MasterDetailChild_Convention_IntituleFilterId').val(),
                    //conventionIdFilter: $('#MasterDetailChild_Convention_LigneConventionsId').val()
                };
            }
        },
        columnDefs: [
            {
                className: 'control responsive',
                orderable: false,
                render: function () {
                    return '';
                },
                targets: 0
            },
            {
                width: 120,
                targets: 1,
                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) {
                                _viewLigneConventionModal.open({ id: data.record.ligneConvention.id });
                            }
                        },
                        {
                            text: app.localize('Edit'),
                            visible: function () {
                                return _permissions.edit;
                            },
                            action: function (data) {
                                _createOrEditModal.open({ id: data.record.ligneConvention.id });
                            }
                        },
                        {
                            text: app.localize('Delete'),
                            visible: function () {
                                return _permissions.delete;
                            },
                            action: function (data) {
                                deleteLigneConvention(data.record.ligneConvention);
                            }
                        }]
                }
            },
            {
                targets: 2,
                data: "ligneConvention.intitule",
                name: "intitule"
            },
            {
                targets: 3,
                data: 'ligneConvention.reference',
                name: 'reference',

            },
            {
                targets: 4,
                data: 'ligneConvention.prixU',
                name: 'prixU',
            },
            {
                targets: 5,
                data: 'ligneConvention.unite',
                name: 'unite',
            },
            {
                targets: 6,
                data: 'ligneConvention.totalHT',
                name: 'Totalht',
                render: $.fn.dataTable.render.number(',', ',', 2)
            },
            {
                targets: 7,
                data: 'ligneConvention.bpf',
                name: 'bpf',
                render: function (data, type, row) {

                    if (data === "NA") {
                        if (row.ligneConvention.autreProduitBPF === 0) {
                            return '<span class="badge badge-light-warning">' + "NC" + '</span>';

                        }
                        return '<span class="badge badge-light-primary">' + row.ligneConvention.autreProduitBPF + '</span>';
                    }
                    return '<span class="badge badge-light-info">' + row.ligneConvention.bpf + '</span>';
                },


            },
        ]
    });

    function getLigneConventions() {
        dataTable.ajax.reload();
       /* $('#ConventionsTable').DataTable().ajax.reload();*/
    }

    function deleteLigneConvention(ligneConvention) {
        abp.message.confirm(
            '',
            app.localize('AreYouSure'),
            function (isConfirmed) {
                if (isConfirmed) {
                    _ligneConventionsService.delete({
                        id: ligneConvention.id
                    }).done(function () {
                        getLigneConventions(true);
                        $('#ConventionsTable').DataTable().ajax.reload();
                        abp.notify.success(app.localize('SuccessfullyDeleted'));
                      
                    });
                }
            }
        );
    }

    $('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').click(function () {
        $('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').hide();
        $('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').show();
        $('#MasterDetailChild_Convention_AdvacedAuditFiltersArea').slideDown();
    });

    $('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').click(function () {
        $('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').hide();
        $('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').show();
        $('#MasterDetailChild_Convention_AdvacedAuditFiltersArea').slideUp();
    });

    $('#CreateNewLigneConventionButton').click(function () {
        _createOrEditModal.open();
    });

    $('#ExportToExcelButton').click(function () {
        _ligneConventionsService
            .getLigneConventionsToExcel({
                filter: $('#LigneConventionsTableFilter').val(),
                intituleFilter: $('#MasterDetailChild_Convention_IntituleFilterId').val()
            })
            .done(function (result) {
                app.downloadTempFile(result);
            });
    });

    abp.event.on('app.createOrEditLigneConventionModalSaved', function () {
        getLigneConventions();
    });

    $('#GetLigneConventionsButton').click(function (e) {
        e.preventDefault();
        getLigneConventions();
    });

    $(document).keypress(function (e) {
        if (e.which === 13) {
            getLigneConventions();
        }
    });

    $('.reload-on-change').change(function (e) {
        getLigneConventions();
    });

    $('.reload-on-keyup').keyup(function (e) {
        getLigneConventions();
    });

    $('#btn-reset-filters').click(function (e) {
        $('.reload-on-change,.reload-on-keyup,#MyEntsTableFilter').val('');
        getLigneConventions();
    });




});

})();

Thks `

0

Bernard created 8 months ago

to provide additional information, I think the problem comes from the fact that I refresh the master table after closing the masterchild modal

Code in index.js of masterchild abp.event.on('app.createOrEditLigneConventionModalSaved', function () { getLigneConventions(); $('#ConventionsTable').DataTable().ajax.reload(); });

I think the code

$('#ConventionsTable').DataTable().ajax.reload(); });

is not in the right place , if I comment on the method, I have no issue

0

ismcagdas created 8 months ago

Support Team

Hi,

Does that work if call getConventions(); instead of $('#ConventionsTable').DataTable().ajax.reload(); ?

0

Bernard created 8 months ago

Hi,

I found the solution , it seems that we must declare dataTable at the top of the file and call the dataTable after like :

MasterDetailChild.js

var _$ligneConventionsTable = $('#MasterDetailChild_Convention_LigneConventionsTable'); var _$ConventionsTable = $('#ConventionsTable');

and

` function getLigneConventions() { dataTable.ajax.reload();

  _$ConventionsTable.DataTable().ajax.reload();

} ` I don't understand why ?

Bernard

11 Answer(s)