Question

我有一个HTML表，它从SQLAlchemy数据库中提取数据。

在此表中，对于每一行，我都有一个Delete按钮，当我点击它时应删除该行和数据库条目。

我遇到的问题：如果我尝试删除此表中的任何行，弹出模式，我单击其中的删除按钮，它关闭，没有其他任何事情发生。

<div class="mt-3 container-fluid">
  <input type="text" id="search-input" placeholder="&#xF002; Search..." title="Search...">
  <table id="budget-table" class="table table-bordered table-hover table-condensed">
    <thead class="header" aria-rowspan="2">
      <tr>
        <th style="display:none;">ID</th>
        <th>User</th>
        <th>Type</th>
        <th>Category</th>
        <th>Name</th>
        <th>Planned Amount</th>
        <th>Date</th>
        <th>Comments</th>
        <th>Update</th>
        <th>Delete</th>
       </tr>
    </thead>
    <tbody>
     {% for post in actual_posts.items %}
       <tr>
         <td style="display:none;"> {{ post.id }}</td>
         <td> {{ post.actual_author.username }}</td>
         <td> {{ post.title_actual }} </td>
         <td> {{ post.category_actual }}</td>
         <td> {{ post.actual_amount_name }}</td>
         <td> {{ post.actual_amount }}</td>
         <td> {{ post.date_posted.strftime('%Y-%m-%d') }}</td>
         <td> {{ post.comments }}</td>
         <td>
          <div>
           <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{{ url_for('posts.update_actual_post', post_id = post.id) }}">Update</a>
           </div>
          </td>
          <td>
           <button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal" data-id="{{ post.id }}" data-url="{{ url_for('posts.delete_actual_post', post_id = post.id) }}">Delete
            </button>
         <!-- Modal -->
   <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title" id="deleteModalLabel">Delete actual</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       <p>Are you sure that you want to delete this actual <span id="postId"></span> entry?</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <a class="btn btn-danger" href="" id="actualDeleteBtn">Delete</a>
     </div>
     </div>
     </div>
     </div>
     </td>
     </tr>
     {% endfor %}
   </tbody>

这是我的Javascript：

<script>
   $('#deleteModal').on('shown.bs.modal', function(event) {
   $("#postId").text($(event.relatedTarget).data('id'));
   $("#actualDeleteBtn").attr('href', $(event.relatedTarget).data('url'));
   })
</script>

在一个for循环内部的HTML Bootstrap模式弹出并且什么都不做

0 个答案: