"Uncaught RangeError: Maximum call stack" for a custom button that doesn't work with the data !

"Uncaught RangeError: Maximum call stack" for a custom button that doesn't work with the data !

MalaiacMalaiac Posts: 2Questions: 1Answers: 1

Trying to add an import CSV button to a datatables ( 7 columns, ~700 rows, loaded by ajax)

Tried different ways, this one "should" work : having a custom hidden form inside the button and triggering the file input screen selection on button action.

        text: '<span class="ion-ios-cloud-upload-outline">&nbsp;Import</span>'
        +'<form style="display: none;" action="import.php" method="POST" id="csv_import">'
        +'<input type="file" id="csv_import_file" name="csv_import_file_name" onchange="this.form.submit();"></form>'
        action: function( e, dt, node, config ) {
            var input_file = $(node).find('#csv_import_file');
            console.log(input_file.attr('name')); // works and shows the input's name in the console.
            input_file.click();
            return false;    
        }

(full js code on https://pastebin.com/ys7NbkFM , doesn't format properly here.)

But I keep getting this error on click
_ Uncaught RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at G (jquery.min.js:2)
at Q.get (jquery.min.js:2)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.y.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLInputElement.<anonymous> (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.trigger (jquery.min.js:2)_

The button and its action are not even touching the data ...
What am I missing ?

This question has an accepted answers - jump to answer

Answers

  • MalaiacMalaiac Posts: 2Questions: 1Answers: 1
    Answer ✓

    Solved. It's an error propagation. But the solution doesn't work inside DataTables buttons, I had to get the button out

    <button class="btn btn-secondary btn-info" style="position: relative; overflow: hidden;" "=""> <span id="goforit" "=""> <span class="ion-ios-cloud-upload-outline">&nbsp;Import</span> <form style="position: absolute; top: -1500px;" action="import.php" method="POST" id="csv_import"> <input type="file" id="csv_import_file" name="csv_import_file" onchange="this.form.submit();"> </form> </span> </button> <script type="text/javascript"> document.getElementById('goforit').onclick = function() { document.getElementById('csv_import_file').click(); }; </script>

This discussion has been closed.