我正在尝试使用模态框来展示商品列表的详细信息,但当我点击模态按钮时,模态框内没有显示任何内容。
这是包含模态按钮的商品列表部分:
<div class="table-responsive">
<table class="table table-bordered">
<!-- 表格头部省略 -->
<?php
// 数据库连接和查询代码省略
while($data = $sql->fetch()){
?>
<tr>
<!-- 表格数据行省略 -->
<td class="align-middle text-center">
<a href='#myModal' class='btn btn-default btn-small' data-id='<?php echo $data['matno']; ?>' data-toggle='modal'><span class="glyphicon glyphicon-folder-open"></a>
</td>
</tr>
<?php
$no++;
}
?>
</table>
<!-- 模态框开始 -->
<div id="myModal" class="modal fade" role="dialog">
<!-- 模态框内容结构省略 -->
</div>
</div>
以下是用于将detail.php
中的数据加载到模态框中的脚本:
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var matno = $(e.relatedTarget).data('matno');
$.ajax({
type: 'post',
url: 'detail.php',
data: 'matno=' + matno,
success: function(data){
$('.modal-body').html(data);
}
});
});
});
</script>
这里是detail.php
的内容:
<?php
include "connection.php";
if(isset($_POST['matno'])) {
$matno = $_POST['matno'];
$sql = $pdo->prepare("SELECT * FROM ERSAsp WHERE matno = ?");
$sql->execute([$matno]);
if($data = $sql->fetch()) {
?>
<table>
<tr class="align-middle text-center">
<img src="data/QR/<?php echo $data['QR']; ?>" width="200" height="200">
</tr>
<tr class="align-middle"><?php echo $data['sapcode']; ?></tr>
<tr class="align-middle"><?php echo $data['sparepart']; ?></tr>
<tr class="align-middle"><?php echo $data['unit']; ?></tr>
<tr class="align-middle"><?php echo $data['manufacturer']; ?></tr>
<tr class="align-middle"><?php echo $data['pn']; ?></tr>
</table>
<?php
} else {
echo "No data found for the given matno.";
}
}
?>
从搜索结果中,我需要根据MySQL中的matno
动态地在模态框中显示具体细节。