您好我需要协助将数据从正文插入到基于用户选择的模态。例如,我有一个带按钮的页面,每个按钮数据包含名字和姓氏。当用户选择按钮时,我使用req.params.id来匹配mongoDB中的数据以返回名称。我知道如何使用两个不同的页面执行此操作,但我想用一个页面执行此操作。
这是我的代码,用于呈现路由并从mongoDB获取所有数据,
app.get("/timesheet", (req, res) => {
Reg.find({}, (err, allReg) => {
if(err){
console.error(err);
} else (
res.render("log", { reg: allReg })
)
});
});
我使用EJS执行forEach来显示每组数据,当前使用anchor元素将它们显示为按钮,因此我可以使用params.id设置href。
<% reg.forEach(function(entries){ %>
<a href="/timesheet/<%= entries._id %>" class="btn btn-outline-primary" data-toggle="modal" data-target="#childList">
<%= entries.firstName %>
<%= entries.lastName %>
</a>
<% }); %>
</div>
以下是获取req.params.id
的路线app.get("/timesheet/:id", (req, res) => {
Reg.findById(req.params.id, (err, foundReg) => {
if(err){
console.error(err);
} else {
res.render("log", { reg: foundReg });
}
});
});
当我点击模态打开的任何按钮时,我希望相关数据显示在模态中。每个按钮打开相同的模态,但它应该是动态的,基于用户点击的按钮。
<div class="modal fade" id="childList" tabindex="-1" role="dialog" aria-labelledby="childListLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="childListLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle"></i></span>
</button>
</div>
<div class="modal-body">
<%= reg.firstName %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-danger">Check In</button>
</div>
</div>
</div>
</div>