buttons.info not working

montoyam

Using the example from this page:
https://datatables.net/reference/api/buttons.info()

I get the info popup on the ajax success, but I don't get the initial 'please wait' popup. I added an alert to test and the alert popup is displaying.

        CheckListTable.button(0).action(function () {
            CheckListTable.buttons.info('Please wait', 'Processing data...');
            alert("here we go");
            $.ajax({
                url: 'api/GenerateInvoices',
                async: false,
                success: function () {
                    CheckListTable.buttons.info('Complete', 'Invoices have been Generated.', 2000);
                }
            });
        });

kthorngren

Using alert() works here:
http://live.datatables.net/zisorucu/1/edit

Can you provide a link to your page or a test case showing the issue? Have you looked at the browser's console for errors?

Kevin

montoyam

I changed the alert to console.log so there was no delays with confirming the alert popups. interesting find. With the test case you posted, if you change it to this:

  table.button( 0 ).action( function () {
    table.buttons.info( 'Please wait', 'Processing data:' +  $.now() );
    console.log('start: ' +  $.now())
    $.ajax( {
      url: '/ajax/arrays.txt',
      success: function () {
        console.log('done: ' +  ($.now()))
        //table.buttons.info( 'Complete', 'Data processing complete', 2000 );
      }
    } );

you will see that the 'please wait' does not show up until 'done' is shown in the console log. (note that I took out the buttons.info on success to test this).
But, if you look at the time stamps, the timestamps appear to be in the correct order, but the first buttons.info is just not displaying right away.

on my project it is a little more noticeable because the ajax takes over 30 seconds.

kthorngren

I copied your code into this test case:
http://live.datatables.net/zisorucu/9/edit

Looking at the browser's network inspector the Ajax request is quick, for me its 1ms. Looks like the buttons.info() message uses a fade in technique that makes it look slow.

The short ajax response time makes it look like the first info message is not displayed. I don't have a way to make the ajax request take longer but I put a setTimeout() function in the success function to simulate a 500ms delay. This example you see both info messages:
http://live.datatables.net/jesadahe/1/edit

Here is the jQuery fadein() docs. I don't see anything to control the buttons.info() fade in time but with a 30 second fetch time this shouldn't be an issue. Do you not see the first buttons.info() message in your project?

Kevin

montoyam

this is very odd. I added a timeout like in your example along with a second timeout and added a third console.log, done2.

I am now seeing both messages, but with very interesting timing:

here we go: Wed Jul 28 2021 08:32:01 GMT-0700 (Pacific Daylight Time)
done2: Wed Jul 28 2021 08:32:05 GMT-0700 (Pacific Daylight Time)
done1: Wed Jul 28 2021 08:32:13 GMT-0700 (Pacific Daylight Time)

the first message does not appear until done2 occurs, which is 4 seconds after the button is clicked. (I'm guessing my ajax call takes 4 seconds, not 30??)

the second message then displays after done1 occurs.

        CheckListTable.button(0).action(function () {
            CheckListTable.buttons.info('Please wait', 'Processing data:' + Date($.now()));
            console.log("here we go: " + Date($.now()));
            setTimeout(function () {
                $.ajax({
                    url: 'api/GenerateInvoices',
                    async: false,
                    success: function () {
                        setTimeout(function () {
                            console.log("done1: " + Date($.now()));
                            CheckListTable.buttons.info('Complete', 'Invoices have been Generated.', 2000);
                        }, 8000);
                        console.log("done2: " + Date($.now()));
                    }
                }, 8000);
            });
        });

montoyam

interesting... when I add that first timeout to your code, I see the first info message right away, before done2 appears.

table.button( 0 ).action( function () {
  table.buttons.info( 'Please wait', 'Processing data:' +  $.now() );
  console.log('start: ' +  $.now());
  setTimeout(function(){
  $.ajax( {
    url: '/ajax/arrays.txt',
    async: false,
    success: function () {
      setTimeout(function(){
        console.log('done1: ' +  ($.now()))
        table.buttons.info( 'Complete', 'Data processing complete', 2000 );
      }, 4000);
    }
  } );
        console.log('done2: ' +  ($.now()));
  },4000);
});

montoyam

ahhh, i see the difference. in my code, I have the wrong order of closing parens and such around line 14 and 15.

montoyam

here is my final code. It seems the async: false is what was throwing the order of events off.

        CheckListTable.button(0).action(function () {
            CheckListTable.buttons.info('Please wait', 'Processing data...');
                $.ajax({
                    url: 'api/GenerateInvoices',
                    //async: false,
                    success: function () {
                        CheckListTable.buttons.info('Complete', 'Invoices have been Generated.', 2000);
                    }
                });
        });