Add a Processing MessageBox

Bryan_Clauss

I have a datatables project that uses serverside processing. It reads from and posts data to a rather slow API (it may take several seconds to perform any I/O operation).

There are html buttons on the page that will read related data to change the contents of the table (this could be a slow call). This makes a call to DataTable().ajax.reload(). I'm also using a datatables button to make an ajax post back to my controller to write data to an API. This is also a slow call.

My question:
I would like to have a "processing" message pop up (something large and noticeable) when the table/page is rendering, or when any of the buttons are pressed. The standard processing message seems to get lost when there is data already rendered in the onscreen table.

Thank you.

kthorngren

Checkout this thread about using blockui.js. Here is another with an alternative and example code.

Kevin

rf1234

Same here! I need this in combination with an alert (using sweetAlert) and - getting rid of the alert with a click - I still need a spinner. One of Kevin's threads is about how I am using busyLoad.

I have some long running Excel reports that are generated server side and then downloaded and displayed as download hyper links in a data table. For some reports this can take several minutes:

The Data Table used is called "reportTable".
"ajaxReloadTbls([reportTable]); " is just a custom function that does an ajax.reload() of the data table with certain parameters.
https://datatables.net/reference/api/ajax.reload()

// Generate the report
$('#tblReport').on('click', 'a.btnReport', function (e) {
    //field type from the row that is being clicked on: selector is row, column
    var reportType = reportTable.cell($(this).closest('tr'), ".reportTypeLabel").data();
    if ( reportType === "that simple report not requiring an alert" ) {
        $.busyLoadFull("show");
    } else { //this takes long: user needs to be informed!
        swal({
            title: 'Your report is being created!'
            text: "That can take a while. Please do not navigate away from this\n\
                   page. You will be notified as soons as the report will be ready.",
            type: '',
            customClass: 'swal-wide',
            confirmButtonClass: 'btn-default'      
        },
            function(isConfirm) {
                if (isConfirm) {
                    $.busyLoadFull("show");
                }
        });
    }
    $.ajax({
        type: "POST",
        url: 'actions.php?action=createReport',
        data: {
            reportId:        reportTable.row( $(this).closest('tr') ).id().substr(4),
            reportTypeLabel: reportType
        },
        success: function (data) {            
            ajaxReloadTbls([reportTable]);            
            $.busyLoadFull("hide");         
            swal({
                title:'Your report is ready!',
                text: "... and you can download it now.",
                type: '',
                customClass: 'swal-wide',
                confirmButtonClass: 'btn-default' 
            });
        },
        error: function(xhr) {
            ajaxReloadTbls([reportTable]);
            $.busyLoadFull("hide");
            swal({
                title: 'Oops!',
                text: "We are sorry, your report could not be created!\n\
                       Please try again later.",
                type: 'error',
                customClass: 'swal-wide',
                confirmButtonClass: 'btn-default' 
            });
            return '';
        }
    });
} );