个人中心
gpt4 book ai didi

javascript - Bootstrap 5模态不显示

转载 作者：行者123 更新时间：2023-12-05 01:29:46 31 4
gpt4 key购买 nike

我正在构建一个带有导航栏和表格的简单网页。表格行是从一个简单的 JS 脚本生成的，该脚本从数据库异步获取数据。为了方便起见，我决定使用 Bootstrap5，但我被卡住了，因为即使页面正确构建和显示，也没有显示模式。

每个表行都有一个最终的 <td>有两个按钮:一个“丢弃行”按钮，它从表中删除该行；一个更新按钮，它应该向我展示一个模式来编辑内容和更新数据库。

这是我得到的:

<!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/bootstrap@5.0.0/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/bootstrap@5.0.0/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>

至于js，这些是函数:

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})`)
    }
    
}

这是示例行的图片:

table row

删除行按钮按预期工作。这里的问题是，当我单击更新按钮时，没有任何反应，即使我将模态的 id 添加到按钮中的 aria 属性(正如您从 js populateTable 函数中看到的那样。

最佳答案

不要忘记 data- 属性在 Bootstrap 5 中已更改为 data-bs-。

动态创建按钮时，设置正确的属性:

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

关于javascript - Bootstrap 5模态不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67534348/

31 4 0
文章推荐： java - Gradle 命令行传递 org.gradle.jvmargs
文章推荐： cuda - 在 CUDA 中求解三对角线性系统
文章推荐： 无法在 OpenBSD 上使用 editline 进行编译
文章推荐： haskell - 为什么这些反向列表功能之一比另一个更快？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com