从表中删除行并使用引导模式作为确认

Question

我希望从我的 codeigniter 框架项目的用户表中删除一行。

我想单击删除按钮，并弹出一个模式窗口，询问用户是否确定删除记录，单击“是”后，我想显示另一个确认已完成的窗口。

我只是在将数据库动态 ID 传递给我的 ajax 调用而不刷新页面时遇到问题，因为我不知道该怎么做：-

<div class = "wrapper">
<table class="table table-striped">

    <thead class = "table_head">
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Class</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody class ="searchable">

    <?php echo validation_errors(); ?>
    <?php if (is_array($users)) {?>
<?php foreach($users as $user){?>
    <tr>

        <td><?php echo $user->ID;?></td>
        <td><?php echo $user->first_name;?></td>
        <td><?php echo $user->last_name;?></td>
        <td><?php echo $user->username;?></td>
        <td><?php echo $user->class;?></td>
        <td><a href ="<?php echo base_url().'index.php/User/edit_user/'. $user->ID ;?>"> Edit</a></td>
        <td><a id = "mybutton" data-toggle="modal" data-target="#confirm_delete_modal" data-id="<?php echo $user->ID;?>"> Delete</a></td>



    </tr>
<?php }}
    ?>
    <?php if(!$users){
        echo '<div class="noresults">';
        echo 'No users available';
        echo '</div>';
    }?>
</tbody>
  </table>

从上面的编辑部分可以看出，我需要将 $user->ID 传递给模态窗口才能删除指定的用户。

  <div id="confirm_delete_modal" class="modal fade" role="dialog">
  <div class="modal-body">
      <p id = "valcomplete"> Are you sure you wish to delete this user?</p>
  </div>
  <a id ="confirmbutton" style = "cursor:pointer;  color:black;">Yes</a>
  <a data-toggle="modal" data-target="#confirm_delete_modal" id ="exitbutton" style = " cursor:pointer; color:black;">No</a>

  <div id="deleted" class="modal fade" role="dialog">
      <div class="modal-body">
          <p id = "valcomplete"> User deleted</p>
      </div>
      <a data-toggle="modal" data-target="#deleted" id ="exitbutton" style = "color:black;">Exit</a>
  </div>

我现在拥有的：

   $('#mybutton').click(function(){
    var ID = $(this).data('id');
    $('#confirm-button').data('id', ID); //set the data attribute on the modal button
});

$('#confirm-button').click(function(){
    var ID = $(this).data('id');
    $.ajax({
        url: "<?php echo base_url(); ?>index.php/Admin/delete_user/"+ID,
        type: "post",
        data:ID,
        success: function (data) {
          $("#confirm_delete_modal").modal('hide');
          $("#deleted").modal('show');

        }
      });
});

谁能帮帮我？？谢谢

Answer 1

为您的按钮添加另一个数据属性并将其设置为您要删除的行的 ID。

<td><a data-id="some_id" data-toggle="modal" data-target="#confirm_delete_modal"> Delete</a></td>

然后您可以像这样访问/传递它：

$('your-button').click(function(){
    var ID = $(this).data('id');
});

---

在您的情况下，您需要将 ID 传递给您的模态，然后传递给 AJAX，以便您可以在模态确认按钮上动态设置数据属性：

$('button-that-brings-up-modal').click(function(){
    var ID = $(this).data('id');
    $('#confirm-button').data('id', ID); //set the data attribute on the modal button
});

$('#confirm-button').click(function(){
    var ID = $(this).data('id');
    $.ajax({
        url: "<?php echo base_url(); ?>index.php/Admin/delete_user/" + ID
    });
});