[英]How to include some JS code into a Bootstrap modal using ejs?
我有一个ejs页面使用一些数据,包括循环通过<%= items [i] .id%>和按钮添加或删除项目。 一旦我将删除功能转移到引导模式(创建删除确认对话框),循环就会停止工作,只有第一个数组项被删除。 我正在使用Bootstrap 4.0及其内置的JQuery。 如果在模态外执行,删除工作正常。 谢谢你的任何提示!
<% for (let i=0; i<items.length; i++) { %>
<div class="card w-100 p-3">
<form method="post" >
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="card-header">
<%= items[i].name %>
</div>
<div class="card-body">
<p class="card-text"> <%= items[i].desc %> </p>
</div>
<button formaction="/project" type="submit" class="btn btn-outline-dark" name="editButton" value="<%= items[i].id %>">Edit</button>
<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
</div>
</form>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form class="form-control" action="/delete" method="post">
<p>Are you sure you want to delete <%= items[i].name %> ? </p>
<button type="submit" class="btn btn-outline-danger" name="deleteButton" value="<%= items[i].id %>">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
<% } %>
所有<div class="model...
都有相同的id
属性。当你点击删除按钮时,只需打开第一个模态。在id
上添加<%= i %>
作为后缀:
<% for (let i=0; i<items.length; i++) { %>
<div class="card w-100 p-3">
<form method="post">
...
<button data-target="#deleteModal<%= i %>" type="button" class="btn btn-outline-danger" data-toggle="modal" >Delete</button>
</form>
</div>
<!-- Delete Modal -->
<div id="deleteModal<%= i %>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>
<% } %>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.