I wrote my code in Bootstrap v3, however, upon realising that it doesn’t support Spinners and many of the CSS elements I’ve envisioned didn’t have the style that I wanted, I want to switch to Bootstrap v4. I added all of the required scripts / css links to the head, however I noticed that one whole table from my code has frankly just disappeared. And I have no idea why. The table is on a separate html element, and works in Bootstrap v3 but not sure why it’s not displaying with v4.
Code:
main2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<style>
</style>
</head>
<body>
<div id="header" style="background-color: white; width:100%; height:auto; position:fixed;">
<p id="statusText">Preparing supermarkets from Google Drive...</p>
<div id="form-group">
<input type="text" class="form-control" id="searchInput" placeholder="Search by Name or ID of Supermarket"/>
</div>
</div>
<!-- <div class="d-flex justify-content-center align-items-center" style="visibility:hidden;">
<div class="spinner-border" id="spinner" role="status">
</div> -->
</div>
<div class="container">
<div id="addsupermarket" style="" class="">
</div>
<div id="foot" style="background-color:white; width:100%; height:auto; position:fixed; top:447px;">
<button type="button" class="btn btn-primary" style="float:right;" id="btnAdd">Add Supermarkets</button>
</div>
<script>
var data;
var checkedItems = new Map();
function loadView(options) {
var id = typeof options.id === "undefined" ? "addsupermarket" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html) {
document.getElementById("addsupermarket").innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function setDataForSearch() {
checkedItems = new Map();
showSpinner();
document.getElementById("statusText").innerHTML = "Loading..."
google.script.run.withSuccessHandler(function(dataReturned) {
data = dataReturned.slice();
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
data.forEach(function(r) {
var tr = template.cloneNode(true);
var supermarketCheckColumn = tr.querySelector(".supermarketCheck");
var supermarketNameColumn = tr.querySelector(".supermarketName");
var supermarketIDColumn = tr.querySelector(".supermarketID");
var supermarketStatusColumn = tr.querySelector(".supermarketStatus");
var supermarketCheckbox = tr.querySelector(".supermarketCheckbox");
supermarketNameColumn.textContent = r[0];
supermarketIDColumn.textContent = r[1];
supermarketStatusColumn.textContent = r[2];
supermarketCheckbox.dataset.supermarketID = r[1];
searchResultsBox.appendChild(tr);
});
document.getElementById("statusText").innerHTML = "Found " + data.length + " results";
hideSpinner();
}).getDataForSearch();
}
function loadAddSupermarketView() {
loadView({func: "loadAddSupermarketView", callback: setDataForSearch});
}
loadAddSupermarketView();
document.getElementById("searchInput").addEventListener("input", inputEventHandler);
function inputEventHandler(e) {
if (e.target.matches("#searchInput")) {
search();
}
}
function showSpinner() {
document.getElementById("spinner").style.visibility = "visible";
}
function hideSpinner() {
document.getElementById("spinner").style.visibility = "hidden";
}
function search() {
var searchInput = document.getElementById("searchInput").value;
var resultsArray = data.filter(function(r) {
return (r[0].toString().toLowerCase().indexOf(searchInput.toString().toLowerCase()) !== -1 || (r[1].toString().indexOf(searchInput.toString()) !== -1));
});
document.getElementById("statusText").innerHTML = "Loading..."
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
resultsArray.forEach(function(r) {
var tr = template.cloneNode(true);
var supermarketCheckbox = tr.querySelector(".supermarketCheckbox");
var supermarketCheckColumn = tr.querySelector(".supermarketCheck");
var supermarketNameColumn = tr.querySelector(".supermarketName");
var supermarketIDColumn = tr.querySelector(".supermarketID");
var supermarketStatusColumn = tr.querySelector(".supermarketStatus");
supermarketCheckbox.dataset.supermarketID = r[1];
supermarketNameColumn.textContent = r[0];
supermarketIDColumn.textContent = r[1];
supermarketStatusColumn.textContent = r[2];
searchResultsBox.appendChild(tr);
});
document.getElementById("statusText").innerHTML = "Found " + resultsArray.length + " results";
}
</script>
</body>
</html>
addsupermarket.html (which contains the table)
<table class="table">
<thead>
<tr>
<th scope="col">Add?</th>
<th scope="col">Name</th>
<th scope="col">ID</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="searchResults">
</tbody>
</table>