无法使用引导模式从 MySQL 中删除数据

Posted 2023-02-24

【中文标题】无法使用引导模式从 MySQL 中删除数据

【英文标题】：Can not delete data from MySQL using bootstrap Modal

【发布时间】：2018-07-15 17:05:22

【问题描述】：

我有一个包含引导数据表的 php 文件 manage-users.php。其中显示来自 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] 显示在每个用户特定的删除按钮上。我现在该怎么办 ？ 如果问题需要更多解释，我会解释。

【问题讨论】：

您应该通过 href 传递用户 ID 并在模型中获取它。

您没有获得用户 ID，因为模态代码似乎在 while 循环之外。

要么在while循环中在中创建模态（不是一个好主意），要么将数据保存在数组中并再次循环以创建模态。

无论如何，最好只有 one 模态并在运行时通过 javascript 应用 id。

“我现在该怎么办？” - 回复 cmets？不离开帖子？

【参考方案1】：

在打开modal的时候，你基本上设置了一个隐藏字段，这样当你提交表单时，它会发送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();
    );
);

使用类似的方法来执行编辑模式。

【讨论】：

@ShaidaMuhammad $(function () is the same as $(document).ready().

按钮在数据表页面中不起作用。仅适用于 1 页，但当我更改为第 2 页时。再次模态不打开。 . . .

我也做了编辑，但是如何在 Modal 中显示现有的用户数据？