Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  June 2020 edited June 2020 Answer ✓

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

  Kevin
• rf1234 Posts: 3,000Questions: 87Answers: 421

  June 2020 edited June 2020

  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 '';
          }
      });
  } );