CODEWITHSUNDEEP
javascripthtmlbootstrap-modalbootstrap-5
fcagnola
fcagnola

Reputation: 670

Bootstrap 5 modal not showing

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">&times;</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:

table 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.

Upvotes: 5

Views: 13044

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

Don't forget that the data- attributes have changed to data-bs- in Bootstrap 5.

When the button is dynamically created, set the correct attributes:

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-bs-toggle": "modal", 
  "data-bs-target": "#updateModal"
});

Demo

Modal Form not showing up

Upvotes: 14

ucipass
ucipass

Reputation: 1068

This is how you do it with Bootstrap5 and JavaScript only:

  let elem = document.getElementById('exampleModalId')
  let modal = new Modal(elem)
  modal.show()

Upvotes: 1

Related Questions