Question

我有一个PHP文件manage-users.php，其中包含bootstrap Data-table。其中显示了来自MySQL用户表的数据。数据表的代码是：

<table id="myTable" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>
                <span class="custom-checkbox">
                    <input type="checkbox" id="selectAll">
                    <label for="selectAll"></label>
                </span>
            </th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php
            $result = mysqli_query($conn,"SELECT * FROM users") or die("Unable to qet all users data " . mysqli_error($conn));
            while ($row = mysqli_fetch_assoc($result)) {
                echo "<tr>";
                echo '<td>
                <span class="custom-checkbox">
                    <input type="checkbox" id="checkbox1" name="options[]" value="1">
                    <label for="checkbox1"></label>
                </span>
                </td>';
                echo "<td>".$row['FIRST_NAME']."</td>";
                echo "<td>".$row['LAST_NAME']."</td>";
                echo "<td>".$row['EMAIL']."</td>";
                echo "<td>".$row['PHONE']."</td>";
                echo '
                <td>
                    <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                    <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>

                </td>
                ';
                echo "</tr>";
            }
        ?>
    </tbody>
</table>

在同一页面中，我有两个用于删除和编辑数据的引导模式。我现在正在努力删除。

删除模式代码是：

<div id="deleteEmployeeModal<?php echo $row['USER_ID']; ?>" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form>
                    <div class="modal-header">                      
                        <h4 class="modal-title">Delete User</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">                    
                        <p>Are you sure you want to delete these Records?</p>
                        <p class="text-warning"><small>This action cannot be undone.</small></p>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                        <button class="btn btn-danger"><a href="delete_user_data.php?id=<?php echo $row['USER_ID']; ?>">Delete</a></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

现在的问题是，我无法删除数据，因为在删除模式中$row['USER_ID]为空。从服务器检索数据没有问题，因为$row['USER_ID]显示在每个特定于用户的删除按钮上。我现在应该怎么做？如果问题需要更多解释，我会解释。

Answer 1

打开模态后，您基本上设置了一个隐藏字段，这样当您提交表单时，它将发送delete_user_data.php?id=YOUR-VALUE。

1）将ID存储在HTML中。一个好地方可能是打开模态的链接。另外，删除data-toggle属性，因为我们将动态打开模态。

echo '<a href="#deleteEmployeeModal" class="delete" data-id="' . $row['USER_ID'] . '"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>';

2）仅使用一种模式进行删除。

<div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- give your form an action and method -->
            <form action="delete_user_data.php" method="GET">
                <div class="modal-header">                      
                    <h4 class="modal-title">Delete User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <p>Are you sure you want to delete these Records?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                </div>
                <div class="modal-footer">
                    <!-- add a hidden input field to store ID for next step -->
                    <input type="hidden" name="id" value="" />
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <!-- change your delete link to a submit button -->
                    <button class="btn btn-danger" type="submit">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

3）动态打开模态。

$(function () {
    $('a.delete').click(function (e) {
        e.preventDefault();
        var link = this;
        var deleteModal = $("#deleteEmployeeModal");
        // store the ID inside the modal's form
        deleteModal.find('input[name=id]').val(link.dataset.id);
        // open modal
        deleteModal.modal();
    });
});

使用类似方法进行编辑模式。

无法使用bootstrap Modal从MySQL中删除数据

1 个答案: