"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 !
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"> 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
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"> 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>