Php 使用ajax以引导模式动态显示内容无法正常工作
我的代码有问题，我遵循了有关此的教程，但我似乎无法使其工作，以下是我的代码：Php 使用ajax以引导模式动态显示内容无法正常工作,php,jquery,mysql,ajax,Php,Jquery,Mysql,Ajax,我的代码有问题，我遵循了有关此的教程，但我似乎无法使其工作，以下是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Gestionnaire de stock</title>
<link href="dist/css/styles.css" rel="stylesheet" />
<link href="dist/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
<link href="dist/css/index.css" rel="stylesheet" crossorigin="anonymous" />
<link href="dist/css/hover-min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="dist/js/fa.min.js"></script>
</head>
<body>
<?php
include "includes/functions.php";
include "menuBar.php";
include "workersheader.php";
?>
<div class="col-md-8 offset-md-2 text-center containerzred">
<h3>Liste des employés</h3><br>
<div class="col-md-12">
<input class="form-control" id="myInput" type="text" placeholder="Rechercher un employé">
<br>
<table class="table table-bordered table-light table-striped">
<thead>
<tr>
<th>Nom</th>
<th>N° tel</th>
<th>Fonction</th>
<th><center>Actions</center></th>
</tr>
</thead>
<tbody id="myTable">
<?php
$query = "SELECT * FROM worker";
$result = mysqli_query($mysqliCon, $query);
while ($row =mysqli_fetch_array($result, MYSQLI_ASSOC)){
if ($row['type'] == "1")
$type="Peseur";
else
$type="Pétrisseur";
echo'<tr class="record">
<td>'.$row['name'].'</td>
<td>'.$row['tel'].'</td>
<td>'.$type.'</td>
<td>
<button type="button" id="modalButton" data-id="'.$row['id'].'" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#custModal">
Fiche de travail
</button>
<td>
</tr>';
// <!-- Modal -->
echo'<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Customer Details</h4>
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-window-close"></i></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="dist/js/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="dist/js/scripts.js"></script>
<script src="dist/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
<script src="dist/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
<script src="dist/js/datatables-demo.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#modalButton').click(function () {
var workerId = $(this).data('id');
$.ajax({
url: 'get_data.php',
type: 'post',
data: { workerId: workerId },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>
</body>
</html>
斯托克宫酒店
雇员名单
笔名
N°电话
功能
行动
$（文档）.ready（函数（）{
$（“#modalButton”）。单击（函数（）{
var workerId=$（this.data（'id'）；
$.ajax({
url:'get_data.php'，
键入：“post”，
数据：{workerId:workerId}，
成功：功能（响应）{
$（'.modal body'）.html（响应）；
$（'#custModal'）.modal（'show'）；
}
});
});
});
提前感谢您，如果页面样式错误，我深表歉意。您不能在页面中重复元素ID。它们的定义是独一无二的。另外，