Message when tryning to reload DataTable #11958

0

Bernard created 16 days ago

Additional infos

0

ismcagdas created 16 days ago

Support Team

Hi @Bernard

Did you update DataTables version ?

0

Bernard created 16 days ago

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

0

m.aliozkaya created 15 days 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 15 days 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 15 days 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 15 days 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 15 days 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 15 days 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 14 days ago

Support Team

Hi,

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

0

Bernard created 10 days 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

Message when tryning to reload DataTable #11958

11 Answer(s)