Trying to display json contents in multiple tables separated by bootstrap's nav tabs. I chose to upload the file via FileReader (mostly due to not knowing of any other ways to get the json into js). It's working fine initially (with hardcoded tables), but after I upload a json with actual info (and remove the hardcoded tables via JS), tabs no longer switch (info still displayed correctly, but only on the first tab).
I get no console errors, and I am pretty positive it's a JS problem, because if I copy-paste the updated (post-upload) html from Chrome to vscode it works perfectly again. Something during upload breaks Bootstrap's JS or stops it from executing, and I can't figure out what it is.
<div class="row mx-3">
<div class="col my-3">
<ul class="nav nav-tabs" id="lefttabs" role="tablist">
<li class="nav-item">
<a id="doc-tab" class="nav-link active" data-toggle="tab" href="#doc" role="tab" data-height="true" >gsdfgsfg</a>
</li>
<li class="nav-item">
<a id="stories-tab" class="nav-link" data-toggle="tab" href="#stories" role="tab" data-height="true" >htrhr</a>
</li>
</ul>
</div>
<div class="col my-3 d-flex justify-content-end">
<ul class="nav" id="righttabs">
<li class="nav-item">
<!-- <a class="nav-link" href="#"><input type="file" id="openfile" /></a> -->
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file">
<label class="custom-file-label" for="file">Choose file</label>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="tablebody" class="tab-content my-2 mx-3">
<div class="tab-pane fade show active" id="doc" role="tabpanel">
<div class="d-inline-flex">
<table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
<thead class="text-dark">
<tr>
<th scope="col"></th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col"><i class="fas fa-plus"></i></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>modal json (1 per project)</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">+</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="stories" role="tabpanel">
<div class="d-inline-flex">
<table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col"><i class="fas fa-plus"></i></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Хочу видеть..</td>
<td>Jersey</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Хочу иметь..</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Хочу понимать..</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">+</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
document.querySelector('#file').addEventListener('change', function() {
var ready = false;
var content = [];
var table = document.querySelectorAll('td');
var tabs = document.querySelector('#lefttabs');
var tablebody = document.querySelector('#tablebody');
var fr = new FileReader();
fr.readAsText(this.files[0]);
var check = function() {
if (ready === true) {
const schemas = content.data.tableSchemas;
while (tabs.firstChild) {
tabs.removeChild(tabs.firstChild);
}
while (tablebody.firstChild) {
tablebody.removeChild(tablebody.firstChild);
}
for (var i = 0; i < schemas.length; i++) {
var navitem = document.createElement('li');
navitem.className = 'nav-item';
var tabname = document.createElement('a');
tabname.setAttribute('id', schemas[i].id + '-tab');
tabname.className = 'nav-link' + (!i ? ' active' : '');
tabname.setAttribute('data-toggle', 'tab');
tabname.setAttribute('href', '#' + schemas[i].id);
tabname.setAttribute('role', 'tab');
tabname.setAttribute('data-height', 'true');
tabname.textContent = schemas[i].name;
navitem.appendChild(tabname);
tabs.appendChild(navitem);
var tab = document.createElement('div');
tab.setAttribute('id', schemas[i].id);
tab.className = 'tab-pane fade' + (!i ? ' show active' : '');
tab.setAttribute('role', 'tabpanel');
var flex = document.createElement('div');
flex.className = 'd-inline-flex';
var grid = document.createElement('table');
grid.className = 'table table-hover table-hover-cells';
grid.className += ' table-borderless mt-2 text-secondary';
grid.textContent = schemas[i].name;
flex.appendChild(grid);
tab.appendChild(flex);
tablebody.appendChild(tab);
}
return;
}
setTimeout(check, 1000);
}
check();
fr.onload = function() {
content = JSON.parse(this.result);
ready = true;
}
})
Sample json:
{
"msg": "SUCCESS",
"data": {
"tableSchemas": [
{
"id": "111111111",
"name": "7676767676"
},
{
"id": "222222222222",
"name": "434343434343"
},
{
"id": "33333333333",
"name": "878787878"
},
{
"id": "44444444444",
"name": "21212121"
},
{
"id": "555555555",
"name": "989898989898"
},
{
"id": "666666666666",
"name": "0909090909"
},
{
"id": "777777777",
"name": "525252525"
},
{
"id": "888888888888",
"name": "74747474"
}
]
}
}
I expect it to still be able to switch tabs after uploading the json, but it does nothing.
I'm using Bootstrap-native.
