如何使用 bootstrap 模态来更新数据？

Question

我正在使用 ejs 模板和 nodejs 作为后端开发电子商务应用程序。因为我有行政工作的管理员角色。我创建了 Bootstrap 模式来更新订单状态。但我只能更新第一个订单，如果我尝试任何其他订单，只有第一个订单得到更新。谁能帮我解决这个问题。

allOrders.ejs（订单列表和模式）

<%- include("../partials/header") %> <%- include("../partials/navbar") %>

<div class="container-fluid">
  <h3 class="text-center mt-2">All Orders</h3>
  <table class="table table-bordered border-primary mt-4 mb-3">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Order Date</th>
        <th scope="col">Order Updated Date</th>
        <th scope="col">Status</th>
        <th scope="col">Amount</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <% for(let order of allOrders ){ %>
    <tbody>
      <tr>
        <td><%= order._id %></td>
        <td><%= order.date %></td>
        <td><%= order.updatedAt %></td>
        <td><%= order.status %></td>
        <td><%= order.amount %></td>
        <td className="bg-secondary">
          <!-- Button trigger modal -->
          <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
          >
            Update
          </button>

          <!-- Modal For Edit Status-->
          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">
                    Update Order Status
                  </h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <form
                  class="m-5"
                  action="/admin/<%= currentUser._id %>/order/<%=order._id%>?_method=PATCH"
                  method="POST"
                  novalidate
                >
                  <div class="mb-3">
                    <label for="orderId" class="form-label">Order ID</label>
                    <input
                      type="text"
                      class="form-control"
                      disabled
                      value="<%= order._id %>"
                    />
                    <label class="form-label">Current Status</label>
                    <input
                      type="text"
                      class="form-control"
                      disabled
                      value="<%= order.status %>"
                    />
                    <div class="mb-4">
                      <label for="updateStatus" class="form-label"
                        >Update Staus
                      </label>
                      <select
                        class="form-select form-control"
                        name="status"
                        value="status"
                      >
                        <option name="Processing" value="Processing">
                          Processing
                        </option>
                        <option name="Prepared" value="Prepared">
                          Prepared
                        </option>
                        <option name="Dispatched" value="Dispatched">
                          Dispatched
                        </option>
                        <option name="Delivered" value="Delivered">
                          Delivered
                        </option>
                      </select>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary save">
                    Save Status
                  </button>
                </form>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                  >
                    Cancle
                  </button>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
    <% } %>
  </table>
</div>
<%- include("../partials/footer") %>

订单路线

const express = require("express");
const router = express.Router();
const { isLoggedIn } = require("../middlewere");
const Order = require("../models/order");

router.get("/admin/:id/allorders", isLoggedIn, async (req, res) => {
  try {
    const allOrders = await Order.find({}).sort({ date: -1 });
    res.render("admin/allOrders", { allOrders });
  } catch (error) {
    req.flash("error", "Cannot Find Orders");
    res.render("error");
  }
});

router.patch("/admin/:id/order/:orderId", isLoggedIn, async (req, res) => {
  try {
    await Order.findByIdAndUpdate(req.params.orderId, req.body);
    req.flash("success", "Order Updated Successfully");
    res.redirect(`/admin/${req.params.id}/allorders`);
  } catch (error) {
    req.flash("error", "Cannot Update Order");
    res.render("error");
  }
});

module.exports = router;

我能够获取所有订单，但在模式中它总是显示第一个订单的详细信息。我检查了来自 Devtool (https://codeshare.io/8pyknv) 的代码，它也显示了正确的信息。但是模态没有显示它。

Answer 1

问题存在于 for 循环内部。在您的循环中，您有一个带有属性 data-bs-target="#exampleModal" 的按钮。这意味着您 table 中的所有行都将具有相同的按钮，该按钮会触发 ID 为 exampleModal 的模式。所有这些按钮将调用相同的模式。

除此之外，每个订单都会生成一个具有特定 id exampleModal 的模态。所以所有模态都有相同的 id。这就是为什么你总是打开第一个模式。每个模态必须有一个唯一的 id

要解决此问题，您应该为模态框提供唯一的 ID，例如

    <div
        class="modal fade"
        id="Modal<%= order._id %>"
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
    >

并且每个按钮都应该调用自己的模式，

         <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#Modal<%= order._id %>"
          >

如何使用 bootstrap 模态来更新数据？

How to use bootstrap modal for update the data?

javascript

ejs

node.js

twitter-bootstrap

bootstrap-modal