I have a button that uploads the excel file.
<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />
Below is an embedded script in the HTML to read the excel file and display it in the UI.
<script type="text/javascript">
// read and display the records from excel file on the screen
// passing in my button id here
$('#input-excel').change(function (e) {
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function (e) {
var excelData = new Uint8Array(reader.result);
var wb = XLSX.read(excelData, { type: 'array' });
console.log(wb);
var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
$('#wrapper')[0].innerHTML += htmlstr;
};
});
</script>
@section scripts{
<script src="~/Scripts/ViewModels/RmaCreation/rmacreation.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script language="javascript" src="~/Scripts/xlsx.full.min.js"></script>
}
I am able to upload excel file in the first iteration. I can see the records from the excel file in the UI.
However, the button becomes unresponsive in the second iteration. How do I make this button responsive after every iteration?
https://jsfiddle.net/03ut9zjs/2/
<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />
<div id="wrapper">
</div>
// read and display the records from excel file on the screen
// passing in my button id here
$('#input-excel').change(function (e) {
$('#wrapper')[0].innerHTML ="";
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function (e) {
var excelData = new Uint8Array(reader.result);
var wb = XLSX.read(excelData, { type: 'array' });
console.log(wb);
var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
$('#wrapper')[0].innerHTML += htmlstr;
};
});
You haven't included wrapper div in your code so i am not sure where/how you've placed it.
It seems to work fine in this fiddle. Are you able to recreate the issue here?