Button.html5: Uncaught TypeError: this.processing is not a function

sanglanun

Hi, I try to do dynamically change filename of export file and change other variable. But it seem the new release got problem inside button.html5.js. Can you rectify this thing. Here is the error image and the link of my code.JsFiddle

bindrid

$(document).ready(function () {
  var default_name = 'my_document';
    $('#example').DataTable({
            dom: 'Bfrtip',
            buttons:[{
                            extend:     'excel',
                            text:       'Excel',
              filename: default_name + "_excel"

                          },
              {
              extend:     'csv',
                            text:       'CSV',
              filename: default_name + "_csv"
                        }]
        });
});

sanglanun

Hi bindrid, thanks for the comment but I know this one. Actually there is other variable also will change depend on the button event. I have update the jsfiddle with the new code.

allan

It sounds like you might be using a new version of the HTML5 buttons file without a new version of the Buttons core. Could you make sure you are using Buttons 1.3.1 please?

Allan

sanglanun

Hi Allan, I already using all new version from nightly version. You can see it in this link. Maybe I miss some of the file?

allan

Thanks. Sorry I missed the JSFiddle above.

The issue is that you aren't telling the action method what Buttons instance should be used - i.e. its a scope change.

Using Function.prototype.call() to make sure it executes in the current scope resolves the issue: https://jsfiddle.net/sbcuzoy8/8/ .

Allan

sanglanun

Thanks Allan, it works, you make my day

dhaniST

Hi, you could upload jsfiddle again?, i have a same problem.
Thanks!

allan

I've since added the last example on this page: buttons.buttons.action which might help you. If not, I'd need to see your code - it looks like the original author has removed the JSFiddle.

Allan

dhaniST

it works, thanks Allan!

infusion

Hi Allan, can you help me with the same issue?
Here is my code:

var table = $('#homepage table').DataTable({
        fixedHeader: {
            header: true,
            footer: false
        },
        aLengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        iDisplayLength: 25,
        columnDefs: [
            {
                "targets": [10, 11, 12],
                "visible": false,
                "searchable": false
            },
        ],
        order: [
            [10, 'desc'],
            [0, 'asc']
        ],
        dom: 'lBfrtip',
        buttons : [
            {
                extend: 'excelHtml5',
                text: 'Export Excel',
                title: '',
                filename: 'report - '+ moment().format("DD-MMM-YYYY"),
                exportOptions: {
                    modifier: {
                        page: 'current'
                    },
                    columns: ':visible'
                },
                customize: function ( xlsx ) {
                    xlsx.xl['styles.xml'] = xmlStyle;
                    ecxelCustomize(xlsx);
                },
                action: function(e, dt, button, config) {
                    $('.loading').fadeIn();
                    setTimeout(function () {
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this,e, dt, button, config);
                        $('.loading').fadeOut();
                    },500);
                },
            },
        ],
    });

Here is the screenshot of the error http://prntscr.com/l71x8p
And screenshot from datatables code where the error fires http://prntscr.com/l71xrd
Both JS and CSS code taken from the CDN http://prntscr.com/l71y1b

infusion

Seems the cause is setTimeout. But I need to export 500-1000+ rows and window is just freezing when I clicking Export button. And this is the only way I found to have some loading animation. Is there a way to keep the animation and not editing the DataTables code?

allan

Can you using Buttons 1.5.4 if you aren't already?

Allan

infusion

I am using Buttons 1.5.4. http://prntscr.com/l75dm7
If I remove setTimeout its ok. But I didnt find other way to have loading animation.

allan

Ah I see. Your setTimeout is changing the scope. You need to use:

                    var that = this;
                    setTimeout(function () {
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(that,e, dt, button, config);
                        $('.loading').fadeOut();
                    },500);

Allan

infusion

Right
Thanks Allan!