我在模式对话框中遇到问题。当用户单击“文件”时,将出现模式对话框,并显示从数据库中获取的数据。
<?php echo '<table>'; ?>
<tr>
<th>
Name
</th>
<th>
File
</th>
</tr>
$query = "SELECT * FROM table";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_array($result)) {
$stu_file=$row['file_upload'];
$ins_file=$row['files_uploads'];
$name = $row['name'];
echo "<tr>";
echo "<td>" .$name. "</td>";
echo "<td><a href='#' data-toggle='modal' data-target='#myModal'>File</a></td>";//code this
echo "</tr>";
}
}else{
echo "No data has been done yet!!";
}
?>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Student File</h4>
</div>
<div class="modal-body">
<?php echo"<pre>".$stu_file."</pre>"?>
</div>
<div class="modal-header">
<h4 class="modal-title">Instructor File</h4>
</div>
<div class="modal-body">
<?php echo"<pre>".$ins_file."</pre>"?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal-->
如您在上面的代码中所见,当我单击文件时,将显示模式对话框,但是$ stu_file将仅显示数据库的最后一行。当我在while循环内移动模式对话框时,它仅显示数据库的第一行。请帮助解决此问题。
变量$stu_file
和$ins_file
将在循环的每次迭代中被覆盖。这样,当您到达循环的结尾并打印模式对话框时,这些变量的值就等于循环中的最后一行。此外,您只有一个模态对话,因此您的方法在这里行不通。
取而代之的是,将来自数据库的数据作为JSON对象打印在<script>
标记中,并使用javascript填充必要信息的方式对话框,可能会更容易。
例如,您可以使用以下内容打印出JSON ...
$data = [];
while($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
echo "<script> var myData = " . json_encode($data) . "; </script>";
现在,您还可以在data-id
属性中填充与数据库中给定id或PK相对应的属性,就像echo "<a href='#' data-toggle='modal' data-target='#myModal' data-id='{$row['id']}'>File</a>"
在循环中那样,这样您就可以在模式的.on('show.bs.modal')
回调中使用该属性从JSON数组中加载适当的数据。
有关如何使用模式回调的信息,请参阅引导文档。应该是...
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var dataId = button.data('id') // Extract info from data-* attributes
// Now you can get the data form your JSON object
var info = myData[dataId]; // or however you set it up
var modal = $(this);
modal.find('.modal-title').text('New message to ' + info);
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句