Bootstrap 数据表模态 Ajax 成功问题
Posted
技术标签:
【中文标题】Bootstrap 数据表模态 Ajax 成功问题【英文标题】：Boostrap Datatable Modal Ajax Success Issues 【发布时间】：2022-01-15 02:53:36 【问题描述】：我已经整理了一个网页，它有一个顶部固定的导航栏和一个带有分页的 CRUD 数据表，其中有用于打开模式的按钮。我似乎遇到的问题是，当我单击删除按钮时，模式会弹出，我可以删除记录，但是模式不会关闭，除非我单击模式外的其他位置并将总记录添加到此“显示 12 个中的 10 个”是不正确的，直到我刷新页面然后显示正确的值。 ` 我在下面包含了我的所有代码。我不知道如何解决这个问题，任何帮助将不胜感激。
//AJAX CODE
//ADD
$(document).on('click','#btn-add',function(e)
var data = $("#user_form").serialize();
$.ajax(
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult)
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200)
$('#addEmployeeModal').modal('hide');
alert('Data added successfully !');
location.reload();
else if(dataResult.statusCode==201)
alert(dataResult);
);
);
$(document).on('click','.update',function(e)
var id=$(this).attr("data-id");
var code=$(this).attr("data-code");
var regno=$(this).attr("data-regno");
var vatno=$(this).attr("data-vatno");
var name=$(this).attr("data-name");
var address=$(this).attr("data-address");
var phone=$(this).attr("data-phone");
var email=$(this).attr("data-email");
var person=$(this).attr("data-person");
$('#id_u').val(id);
$('#code_u').val(code);
$('#regno_u').val(regno);
$('#vatno_u').val(vatno);
$('#name_u').val(name);
$('#address_u').val(address);
$('#phone_u').val(phone);
$('#email_u').val(email);
$('#person_u').val(person);
);
//Update
$(document).on('click','#update',function(e)
var data = $("#update_form").serialize();
$.ajax(
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult)
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200)
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
else if(dataResult.statusCode==201)
alert(dataResult);
);
);
$(document).on("click", ".delete", function()
var id=$(this).attr("data-id");
$('#id_d').val(id);
);
$(document).on("click", "#delete", function()
$.ajax(
url: "backend/save.php",
type: "POST",
cache: false,
data:
type:3,
id: $("#id_d").val()
,
success: function(dataResult)
$('#deleteEmployeeModal').modal('hide');
$("#"+dataResult).remove();
);
);
$(document).on("click", "#delete_multiple", function()
var user = [];
$(".user_checkbox:checked").each(function()
user.push($(this).data('user-id'));
);
if(user.length <=0)
alert("Please select records.");
else
WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
var checked = confirm(WRN_PROFILE_DELETE);
if(checked == true)
var selected_values = user.join(",");
console.log(selected_values);
$.ajax(
type: "POST",
url: "backend/save.php",
cache:false,
data:
type: 4,
id : selected_values
,
success: function(response)
var ids = response.split(",");
for (var i=0; i < ids.length; i++ )
$("#"+ids[i]).remove();
);
);
$(document).ready(function()
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function()
if(this.checked)
checkbox.each(function()
this.checked = true;
);
else
checkbox.each(function()
this.checked = false;
);
);
checkbox.click(function()
if(!this.checked)
$("#selectAll").prop("checked", false);
);
);
//MY php CODE
<?php
session_start();
if (!isset($_SESSION["user_email"]))
header('location: login.html');
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
PHP
</title>
<!-- favicon -->
<link rel="icon" href="/assets/img/favicon.ico">
<!-- ===== DATATABLE ===== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- ===== DATATABLE STYLE ===== -->
<link rel="stylesheet" href="http://localhost/PHP/assets/style.css">
<!-- Style -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- BOOTSTRAP MODAL -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- AJAX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ajax/ajax.js"></script>
</head>
<body class="home">
<!-- Navbar -->
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">LIMA RDF <i>Engineering</i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav" style="margin-left: auto;text-align: center;">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="http://localhost/PHP/index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Setup
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="http://localhost/PHP/partner.php">Business Partner</a></li>
<li><a class="dropdown-item" href="#">Project</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<button class="btn btn-outline-danger" type="button" onclick="window.location.href='./login/logout.php';">Log Out</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- DATATABLE START-->
<div class="container">
<div>
<a href="#addClientModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i>
<span>Add New Client</span></a>
</div>
<div class="row">
<div class="col-md-12">
<div class="datatable">
<table id="example" class="content-table table-hover" style="width:100%">
<thead>
<tr>
<th style="text-align: center;">CLIENT NO</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>PHONE NO</th>
<th>EMAIL</th>
<th>CONTACT PERSON</th>
<th style="text-align: center;">ACTION</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn, "SELECT * FROM tbl_client");
$i = 1;
while ($row = mysqli_fetch_array($result))
?>
<tr id="<?php echo $row["id"]; ?>">
<td style="text-align: center;"><?php echo $row["code"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["person"]; ?></td>
<td style="text-align: center;">
<a style="padding-left:5px;padding-right:5px;" href="#editClientModal" class="edit" data-toggle="modal">
<i class="material-icons update" data-toggle="tooltip" data-id="<?php echo $row["id"]; ?>" data-code="<?php echo $row["code"]; ?>" data-regno="<?php echo $row["regno"]; ?>" data-vatno="<?php echo $row["vatno"]; ?>" data-name="<?php echo $row["name"]; ?>" data-address="<?php echo $row["address"]; ?>" data-phone="<?php echo $row["phone"]; ?>" data-email="<?php echo $row["email"]; ?>" data-person="<?php echo $row["person"]; ?>" title="Edit"><span class="fa fa-pencil"></span></i>
</a>
<a style="padding-left:5px;padding-right5px;" href="#deleteClientModal" class="delete" data-id="<?php echo $row["id"]; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"><span class="fa fa-trash"></span></i></a>
</td>
</tr>
<?php
$i++;
?>
</tbody>
</table>
<!-- Add Modal HTML -->
<div id="addClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="user_form">
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>CLIENT CODE</label>
<input type="text" id="code" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>BUSINESS REGISTRATION NO.</label>
<input type="text" id="regno" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT REGISTRAION NO.</label>
<input type="text" id="vatno" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>NAME</label>
<input type="text" id="name" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>ADDRESS</label>
<input type="textarear" rows="4" cols="50" id="address" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
<input type="phone" id="phone" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>EMAIL</label>
<input type="email" id="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>CONTACT PERSON</label>
<input type="text" id="person" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Code</label>
<input type="text" id="code_u" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>Buiness Registration No.</label>
<input type="text" id="regno_u" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT Registration No.</label>
<input type="text" id="vatno_u" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" id="name_u" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="address" id="address_u" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>Phone No.</label>
<input type="phone" id="phone_u" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email_u" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Contact Person</label>
<input type="text" id="person_u" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteClientModal" 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">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_d" name="idd" class="form-control">
<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 type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>
<style>
.pagination
float: right;
text-align: right;
.pagination .page-item.active .page-link
background-color: #0A2558;
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus
background-color: #0A2558;
.pagination .page-item.active .page-link:hover
background-color: #0A2558;
.content-table
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
.content-table thead tr
background-color: #0A2558;
color: #ffffff;
text-align: left;
font-weight: bold;
.content-table th,
.content-table td
padding: 8px 8px;
.content-table tbody tr
border-bottom: 1px solid #dddddd;
.content-table tbody tr:nth-of-type(even)
background-color: #f3f3f3;
.content-table tbody tr:last-of-type
border-bottom: 2px solid #009879;
.content-table tbody tr.active-row
font-weight: bold;
color: #009879;
.dataTables_filter
float: right;
text-align: right;
</style>
<script>
$(document).ready(function()
$('#example').DataTable();
);
</script>
</body>
</html>
//MY SAVE PHP
<?php
include 'database.php';
if(count($_POST)>0)
if($_POST['type']==1)
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "INSERT INTO `tbl_client`( `code`, `regno`, `vatno`, `name`, `address`, `phone`, `email`,`person`)
VALUES ('$code','$regno','$vatno','$name','$address','$phone','$email','$person')";
if (mysqli_query($conn, $sql))
echo json_encode(array("statusCode"=>200));
else
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
mysqli_close($conn);
if(count($_POST)>0)
if($_POST['type']==2)
$id=$_POST['id'];
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "UPDATE `tbl_client` SET `code`='$code',`regno`='$regno',`vatno`='$vatno',`name`='$name',`address`='$address', `phone`='$phone', `email`='$email', `person`='$person' WHERE id=$id";
if (mysqli_query($conn, $sql))
echo json_encode(array("statusCode"=>200));
else
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
mysqli_close($conn);
if(count($_POST)>0)
if($_POST['type']==3)
$idd=$_POST['id'];
$sql = "DELETE FROM `tbl_client` WHERE id=$idd ";
if (mysqli_query($conn, $sql))
echo $idd;
else
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
mysqli_close($conn);
?>
【问题讨论】：
这真的是minimal reproducible example的具体问题吗？这看起来像是整个页面的转储。另见tour 和How to Ask。在我们到达重点之前，我们不会想经历所有这些。基本上，虽然听起来你只需要在 AJAX 调用完成后发出一个命令来关闭模式。 警告：您的代码容易受到 SQL 注入攻击。您应该使用参数化查询和准备好的语句来帮助防止攻击者通过使用恶意输入值来破坏您的数据库。 bobby-tables.com 给出了风险解释，以及如何使用 PHP / mysqli 安全地编写查询的一些示例。 切勿将未经处理的数据直接插入您的 SQL 中。按照您现在编写代码的方式，有人可以轻松窃取、错误更改甚至删除您的数据。 phpdelusions.net/mysqli 还包含使用 mysqli 编写安全 SQL 的好例子。另见mysqli documentation 和这个：How can I prevent SQL injection in PHP?。对查询进行参数化还将大大降低由于未转义或错误引用的输入值而导致意外语法错误的风险。 我加入了@ADyson 的 cmets。您还应该在将数据库数据放入 HTML 之前对其进行清理。如果有人在任何字段中输入<script>alert('XSS')</script>，您可能已经阻止了 SQL 注入，但如果您使用<?php echo $row['name']; ?> 打印它，那么它将在浏览器中执行，从而导致潜在的 XSS 攻击，从而损害您的应用程序。您应该至少使用htmlentities() 或filter_*() functions of PHP。现在，关于您的问题，我们设置您的应用程序来调试它是相当多的工作:-(
您的 delete-multiple 不会隐藏模式。目前尚不清楚哪个函数给出了问题。这是我们需要minimal reproducible example 而不是未经过滤的代码转储的另一个原因。有时，无论如何，制作这样一个例子的过程实际上可以向你揭示问题。每当您遇到调试问题时，这是一个很好的做法。
【参考方案1】：
查看所有引导程序 data- 属性，确保所有这些属性都使用 data-bs- 前缀。 我在你的代码中找到了几个没有它。在引导程序 5 中，您的引导程序属性应包含 data-bs- 而不是 data- 才能正确执行。
如果您是从 bootstrap 4 迁移，请查看迁移更改列表here。
【讨论】：
以上是关于Bootstrap 数据表模态 Ajax 成功问题的主要内容，如果未能解决你的问题，请参考以下文章
将 Django 和 Bootstrap 5 Modal 与 Ajax 结合使用
带有 JQuery 和 AJAX 的 Bootstrap 4 模态？