php - Bootstrap 模态确认删除

Question

大家好，我正在尝试使用模态删除确认从我的表中删除记录/行。到目前为止，这是我尝试过的:

<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
  e.preventDefault();
  $("#dialog-example").modal('show');
});

$("#btn-delete").click(function(e) {
  $("#dialog-example").modal('hide');
});

});
</script>

         <table class="table table-bordered">
                    <?php
                    $stmt2 = $conn->prepare( "SELECT project_code, description
                          FROM tblprojects" );
                    $stmt2->execute();

                    for($i=0; $row2 = $stmt2->fetch(); $i++){
                       $project = $row2['project_code'];
                       $desc = $row2['description'];
                    ?>
                <tr>
                    <td><a href="project-detail.php?code=<?php echo $project; ?>">
                        <?php echo $project; ?></a></td>
                    <td><?php echo $desc; ?></td>
                    <td><a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
                        <i class="icon-edit icon-white">
                        </i>
                    </a></td>
                    <td><a href="#<?php echo $project; ?>"
                  id="<?php echo $project; ?>"
                  data-id="<?php echo $project; ?>"
                  class="btn-show-modal" data-toggle="modal" title="Delete record">
                  <i class="icon-trash icon-white"></i></a></td>

                  <div class="modal hide fade" id="dialog-example">
                      <div class="modal-header">
                        <h5>Confirm Delete</h5>
                      </div>
                      <div class="modal-body">
                        <p class="modaltext">Are you sure you want to delete this record?</p>
                      </div>    

                      <div class="modal-footer">
                        <a href="#" data-dismiss="modal" class="btn btn-info">No<a>
                        <a href="delete-project.php?code=<?php echo $project; ?>" 
                          class="btn btn-danger" id="btn-delete">Yes<a>
                      </div>
                  </div>

              </tr>
                    <?php 
                    } 
                    ?>
            </table>

但问题是，当我要删除最后一行时，被删除的是第一行。为什么会这样？有任何想法吗？非常感谢您的帮助。谢谢。

Answer 1

问题出在模态生成和 $project 值的传递上。

你正在使用一个循环作为

for($i=0; $row2 = $stmt2->fetch(); $i++){
                       $project = $row2['project_code'];
                       $desc = $row2['description'];
                    ?>

在上面的循环中，你正在生成模态，所以基本上你会有很多模态，它们等于查询中的行数。

现在所有这些都具有相同的“id”，即“dialog-example”，一旦你点击删除，它就会从 DOM 中弹出第一个模式并删除错误的数据。

解决方案对于每个模式，您将 id 指定为

<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">

然后在吹代码

$(".btn-show-modal").click(function(e){
  e.preventDefault();
  $("#dialog-example").modal('show');
});

使用 attr("id") 获取元素的 id 并将其附加在

的末尾

"dialog-example_"+{id you received} 

您也需要为隐藏模态做同样的事情。

UPDATE ON HOW TO DO IT

将模态 div id 指定为

<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">

然后在点击函数中为as

$(".btn-show-modal").click(函数(e){ e.preventDefault(); var id = $(this).attr('id'); var modal_id = "dialog-example_"+id; $("#"+modal_id).modal('显示');});

改变

<a href="delete-project.php?code=<?php echo $project; ?>" 
                          class="btn btn-danger" id="btn-delete">Yes<a>

到

<a href="delete-project.php?code=<?php echo $project; ?>" 
                          class="btn btn-danger" id="<?php echo $project ;?>">Yes<a>

最后

    $("#btn-delete").click(function(e) {
  $("#dialog-example").modal('hide');
});

到

$(".btn btn-danger").click(function(e) {
  var id = $(this).attr('id');
  var modal_id = "dialog-example_"+id;
  $("#"+modal_id).modal('hide');
});