У меня есть таблица, в которой есть кнопка в каждой строке, чтобы показать детали каждой записи. мне нужно передать выбранную строку данных в модальную.
вот мой PHP-код для отображения данных
<?php include 'koneksi.php'; $sql = "SELECT UPPER(id_site) AS id_site, UCASE(name_site) AS name_site, witel, UPPER(uplink) AS uplink, port_uplink, ip_uplink, UPPER(olt) AS olt, ip_olt, port_olt, ip_ont FROM data_site ORDER BY witel ASC"; $result = $conn->query($sql); if($result->num_rows > 0){ //output data while ($row = $result->fetch_assoc()) { echo "<tr> <td>$row[id_site]</td> <td>$row[name_site]</td> <td>$row[witel]</td> <td>$row[olt]</td> <td>$row[ip_olt]</td> <td>$row[port_olt]</td> <td>$row[ip_ont]</td> <td><button type='button' data-id='".$row['id_site']."' class='btn btn-xs btn-success' data-toggle='modal' data-target='#detail'>DETAIL</button></td> </tr>"; } } ?> этот для отображения данных в модальных
<?php include 'koneksi.php'; $sql = "SELECT * FROM data_site WHERE id_site = '".$row['id_site']."'"; $result = $conn->query($sql); if($result->num_rows > 0){ while ($row = $result->fetch_assoc()) { echo "<table> <tr> <td>ID Site </td> <td>: $row[id_site]</td> </tr> <tr> <td>Nama Site </td> <td>: $row[name_site]</td> </tr> <tr> <td>Witel</td> <td>: $row[witel]</td> </tr> <tr> <td>OLT Hostname </td> <td>: $row[olt]</td> </tr> <tr> <td>IP OLT </td> <td>: $row[ip_olt]</td> </tr> <tr> <td>Port OLT</td> <td>: $row[port_olt]</td> </tr> <tr> <td>IP ONT</td> <td>: $row[ip_ont]</td> </tr> </table> "; } } ?>
и это мой модальный
<div id="detail" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
и мой javascript
<script> $('#detail').on('show.bs.modal', function (e) { var uniqueId = $(e.relatedTarget).data('id'); $('.modal-title').html('Detail site ' + uniqueId); $('.modal-body').html(uniqueId); }); </script>
Что вам нужно – это вызов Ajax внутри $('#detail').on('show.bs.modal', function (e) { } для извлечения данных из $row['id_site']
<script> $(document).ready(function() { $('#detail').on('show.bs.modal', function (e) { var uniqueId = $(e.relatedTarget).data('id'); //Ajax Method $.ajax({ type : 'post', url : 'file.php', //Here you will fetch records data : 'uniqueId='+ uniqueId, //Pass uniqueId success : function(response){ $('.modal-title').html('Detail site ' + uniqueId); $('.modal-body').html(response); } }); }); }); </script>
file.php
<?php include 'koneksi.php'; if($_POST['uniqueId']) { $uniqueId = $_POST['uniqueId']; //escape the string $sql = "SELECT * FROM data_site WHERE id_site = '".$uniqueId."'"; $result = $conn->query($sql); if($result->num_rows > 0){ while ($row = $result->fetch_assoc()) { echo "<table> <tr> <td>ID Site </td> <td>: $row[id_site]</td> </tr> <tr> <td>Nama Site </td> <td>: $row[name_site]</td> </tr> <tr> <td>Witel</td> <td>: $row[witel]</td> </tr> <tr> <td>OLT Hostname </td> <td>: $row[olt]</td> </tr> <tr> <td>IP OLT </td> <td>: $row[ip_olt]</td> </tr> <tr> <td>Port OLT</td> <td>: $row[port_olt]</td> </tr> <tr> <td>IP ONT</td> <td>: $row[ip_ont]</td> </tr> </table> "; } } } ?>