Bootstrap modal always pop up after Datatables's page change event

Tam2048

I'm trying to create a custom modal with bootstrap and It's purpose is to warn user If there are unsaved works before changing page.
But for some reason, The modal is always appear after the DataTables change the page.

Here is my code:

let pageLength = 10
let myTable = $("#myTable").DataTable(
{
    pageLength: pageLength,
    order: [0, "desc"],
    preDrawCallback: function (settings) {
        // ignore first draw
        if (myTable) { 
            // check if there are any unsaved changes
            if (isEditing()) {
                // show the modal
                $('#alert-modal').modal({ backdrop: 'static' })
                
                // other stuffs ...
            }
        }
    },
});

There is no error message shown.

I have referenced some other posts, tested It with browser's default dialog and It worked fine, but I'm not sure what is the reason for this behavior with bootstrap.

Please help.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin