モーダルダイアログで問題が発生しています。ユーザーが「ファイル」をクリックすると、モーダルダイアログが表示され、データベースからフェッチしたデータが表示されます。
<?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は、ループの反復ごとに上書きされます。そのため、ループの最後に到達してモーダルダイアログを出力するまでに、これらの変数の値は、ループの最後の行にあるものになります。さらに、モーダルダイアログが1つしかないため、ここではアプローチが機能しません。
代わりに、データベースからフェッチしたデータを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]
コメントを追加