passing selected datarow into modal bootstrap

Question

I have a table which has a button in each row to show details of each record. what I need is to pass selected data row to modal.

here is my PHP code for display data

                <?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>";
                    }
                }
             ?> 

this one for display data in modal

<?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>
                        ";
                    }
                }
              ?>

and this is my modal

<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>

and my 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> 

Answer 1

What you need is an Ajax call inside $('#detail').on('show.bs.modal', function (e) { } to fetch data against $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>
        ";
    }
}
}
?>