179
rated 0 times
[
185]
[
6]
/ answers: 1 / hits: 7371
/ 3 Years ago, fri, may 14, 2021, 12:00:00
I'm building a simple webpage with a navbar and table. The table rows are generated from a simple JS script fetching data asynchronously from a DB.
I decided to use Bootstrap5 for convenience, but i'm stuck because even though the page correctly builds and displays, the modals aren't shown.
Each table row has a final <td> with two buttons: a "discard row" button which removes the row from the table and an update button, which is supposed to show me a modal to edit content and update the DB.
here is what i've got:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>My new page</title>
</head>
<body>
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
my modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Oversonic</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="reload()">Reload</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Content -->
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10" id="main-content">
<div class="row my-3" id="header"><h2>Conversation logs:</h2></div>
<div class="row" id="content">
<table class="table table-hover" id="main-table">
<thead>
<tr>
<th scope="col">datetime</th>
<th scope="col">user:</th>
<th scope="col">response:</th>
<th scope="col">data</th>
<th scope="col">location/th>
<th scope="col">buttons</th>
</tr>
</thead>
<tbody id="loaded-content">
<!-- dynamically filled -->
</tbody>
</table>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="resources/loading-spinner.js"></script>
<script src="resources/script.js"></script>
</body>
</html>
as for the js these are the functions:
const table_body = document.getElementById("loaded-content");
function populateTable (file) {
// Populate the table with data from the file's rows
file.forEach(row => {
const new_row = document.createElement("tr");
for (const key in row) {
const new_td = document.createElement("td");
if (key == "timestamp") {
new_td.textContent = new Date(row[key]).toDateString();
} else {
new_td.textContent = row[key];
}
new_row.appendChild(new_td);
}
// Create buttons: update and discard
const btn_update = document.createElement("button");
const btn_discard = document.createElement("button");
const updateButton = addTextandAttributes(btn_update, "<img src="resources/cloud-plus-fill.svg"></img>", {"type":"button", "class":"btn btn-outline-info btn-sm mt-1 me-2", "data-toggle": "modal", "data-target": "#updateModal"});
const discardButton = addTextandAttributes(btn_discard, "<img src="resources/x-circle.svg"></img>", {"type": "button", "class":"btn btn-outline-dark btn-sm mt-1", "onclick": "deleteRow(this)"});
// Create cell to store buttons and append it to each row
const buttonsCell = document.createElement("td");
buttonsCell.appendChild(updateButton);
buttonsCell.appendChild(discardButton);
new_row.appendChild(buttonsCell);
table_body.appendChild(new_row);
});
}
function deleteRow(element) {
try {
const idx = element.rowIndex
var row = element.parentElement.parentElement
console.log(row)
table_body.deleteRow(idx)
} catch (error) {
console.log(`Could not delete row! (${error})`)
}
}
here is a picture of a sample row:
the delete row button works as expected.
the problem here is that when i click the update button nothing happens, even though i added the modal's id to the aria attribute in the buttons (as you can see from the js populateTable function.
More From » html
