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”即“对话框示例”，一旦你点击删除它就会从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; ?>">

然后在点击功能中作为

$（ “BTN-显示模态”）。单击（函数（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');
});

Answer 2

关于主题

问题是你有多种模态。但是在1 id上选择它。所以jQuery会选择第一个值。

解决方案是将删除网址放在隐藏的输入字段中。然后，当用户单击打开的删除模式时，您选择该URL并将其放在标记中。

示例时间

JavaScript部分

$(function(){
  $(".btn-show-modal").click(function(e){
    // put the right url in the delete
    $("#dialog-example .delete-url").attr('href', $(this).attr('data-delete-url');
    $("#dialog-example").modal('show');

    return e.preventDefault();
  });

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

PHP部分

我认为$ stmt已经准备好等等

<ul>
  <? foreach($stmt->fetchAll() as $record) : ?>
    <li>
      <a href="#" class="delete" data-delete-url="?id=<?= $record['project_code']; ?>">delete</a>
    </li>
  <? endforeach; ?>
</ul>
<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 class="delete-url btn btn-danger">Yes<a>
  </div>
</div>

代码解释 除非您更改id，否则在foreach / for / while中放置引导模式并不方便。但话又说了很多重复的代码。

代码的作用是根据用户点击的a动态更改delete-url

非主题

我强烈建议您使用foreach来迭代数据记录而不是for循环。

$stmt2 = $conn->prepare( "SELECT project_code, description
    FROM tblprojects" );
$stmt2->execute();

for($i=0; $row2 = $stmt2->fetch(); $i++){ /** code **/}

将是

$stmt2 = $conn->prepare( "SELECT project_code, description
    FROM tblprojects" );
$stmt2->execute();

foreach($stmt2->fetchAll() as $record){}

Answer 3

因为当你打开模态时，它会打开第一个#dialog-example div。

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

Answer 4

因为你为每一行生成模态这是错误的！
并显示模态（第一模态显示）这是错误的！（这删除第一行）
创建一个模态并使用jquery设置参数，例如

$(".btn-show-modal").click(function(e){
  e.preventDefault();
  $("#dialog-example").modal('show');
  $("#dialog-example #btn-delete").attr('href','delete-project.php?code='+$(this).attr('data-id'));
});

祝你好运

Bootstrap模态确认删除

4 个答案: