Custom modal to get file name when exporting to Excel

arcanisgk

Link to test case:

this is es6+ javascript code related, I implement the generation of a custom modal so that when exporting the data to an Excel file, it asks for the name of the file:

     {
       extend: 'excelHtml5',
       text: '<i class="fas fa-file-excel"></i>',
       className: 'btn fs-4 text-center table-export-element',
       action: function (e, dt, node, config) {
           const modalConfig = HandlerModal.initModal();
           modalConfig.title = 'Export to Excel';
           modalConfig.content = `
                                   <div class="form-group">
              <label for="filename" class="form-label">Filename</label>
              <input type="text" class="form-control" id="filename" value="export">
                                   </div>`;
           modalConfig.footerButtons = [
               {
                   text: 'Export',
                   class: 'btn-primary',
                   onClick: () => {
                       const filename = document.getElementById('filename').value || 'export';
                       $.fn.dataTable.ext.buttons.excelHtml5.action.call(
                           this,
                           e,
                           dt,
                           node,
                           {
                               ...config,
                               filename: filename,
                               exportOptions: {
                                   columns: ':visible'
                               }
                           }
                       );
                       bootstrap.Modal.getInstance(document.querySelector('.modal.show')).hide();
                   }
               },
               {
                   text: 'Cancel',
                   class: 'btn-secondary',
                   onClick: () => {
                       bootstrap.Modal.getInstance(document.querySelector('.modal.show')).hide();
                   }
               }
           ];
           HandlerModal.createModal(modalConfig);
       }
    },

Error messages shown:

datatables.min.js:71 Uncaught (in promise) TypeError: l is not a function
at datatables.min.js:71:23516
(anónimas) @ datatables.min.js:71
Promise.then
action @ datatables.min.js:71
onClick @ handler-plugin.js:450
(anónimas) @ handler-modal.js:186

Description of problem:

I have managed to create a custom action to export the contents of my table to an Excel file, and everything works correctly, but for some reason I receive the aforementioned error message in the JavaScript console, so I don't understand if everything works. Why does this error appear? What does this error mean? How do I eliminate/solve this error?

Line 450 refers to the .call() call:

$.fn.dataTable.ext.buttons.excelHtml5.action.call(
    this,
    e,
    dt,
    node,
    {
        ...config,
        filename: filename,
        exportOptions: {
            columns: ':visible'
        }
    }
 );

arcanisgk

if i replace this with dt.button(null).node() get the same error...

kthorngren

Can you build a test case replicating the error so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Its difficult to know what the code l is not a function at datatables.min.js:71:23516 is when using minimized and likely concatenated code.

Kevin

arcanisgk

I'm going to use the non-minified code to see if I have something more precise... the problem is the test case, it's impossible for me due to the complexity of the development, practically, I developed a separate datatable handler to be able to parameterize all the options that can be implemented in conjunction with the datatable plugins as well as their parameterized/programmatic activation and deactivation of features...

arcanisgk

ok, in the non-minimize version the error reported is here:

datatables.js:103984 Uncaught (in promise) TypeError: cb is not a function
at datatables.js:103984:5
(anónimas) @ datatables.js:103984
Promise.then
action @ datatables.js:103982
onClick @ handler-plugin.js:450
(anónimas) @ handler-modal.js:186

when browsing to the code, the code is this ( in datatables.js):

if (zip.generateAsync) {
            // JSZip 3+
            zip.generateAsync(zipConfig).then(function (blob) {
                _saveAs(blob, filename);
                cb();
            });
        }
        else {
            // JSZip 2.5
            _saveAs(zip.generate(zipConfig), filename);
            cb();
        }

arcanisgk

and it seems to be true, studying the non-minified code a bit, I don't find cb() declared as a function within:

//
// Excel (xlsx) export
//
DataTable.ext.buttons.excelHtml5

kthorngren

Good find! Looks like a new parameter called cb was added to DataTable.ext.buttons.csvHtml5.action.call() in Buttons 3.0. You will need to pass the parameter into the function call. See the 2nd example in the buttons.buttons.action docs.

Kevin

arcanisgk

I swear that wasn't there yesterday...

kthorngren

You probably looked at the buttons.buttons.action docs instead of the buttons.buttons.action docs. Note the link to the feature docs.

Kevin