Menampilkan data di modal php

Question

disuatu halaman php sy menampilkan data dari mysqldb dengan bentuk tabel..
kemudian di satu kolom sy menggunakan anchor tag ( <a ></a>

..
untuk menampilkan informasi dari record tersebut berdasarkan id nya..

Code:



<a href="#UpdateModal" data-toggle="modal" data-id="<?php echo $data['rek'] ?>">Update</a>

kemudian dihalaman yg sama di bagian modal body sy coba seperti ini :

Code:



<div class="modal-body">

    <div class="fetched-data"></div>

</div>

setelah itu masih dihalaman yg sama di bagian script jquery :

Code:



 $(document).ready(function(){

     $('#UpdateModal').on('show.bs.modal', function (e) {

         var rowid = $(e.relatedTarget).data('data-id');

         $.ajax({

                       url : 'tes.php',

                       type : 'post',

                       data :  'rowid='+ rowid,



                      success : function(data){

                       $('.fetched-data').html(data);

             }

         });

     });

 });

lanjut dibagian file tes.php yg nantinya diisi untuk coding query , sementara saya coba dulu seperti ini :

Code:



 <?php



if (isset($_POST['rowid'])){

     



$id = $_POST['rowid'];

        echo $id;

 }



?>

setelah dicoba klik link di tampilan hasil data , modal form bisa muncul, hanya saja echo dari tes.php tidak keluar.

Mungkin agan2 ada yg bisa kasih petunjuk , dibagian mana ya yang salah ?

sempat nyoba untuk bypas langsung dari script jquery langsung ke modal tanpa file php untuk fetch data ( tes.php)

Code:



[removed]

$(document).ready(function(){

    $('#UpdateModal').on('show.bs.modal', function (e) {

        var rowid = $(e.relatedTarget).attr('data-id');

        $.ajax({

            data :  'rowid='+ rowid, 

            success : function(data){

            $('.fetched-data').html(rowid);            }

        });

     });

});

[removed]

nilai id bisa muncul di modal form

setelah itu saya coba memasukan angka tersebut ke variabel, kemudian sy tes echo variabel tersebut

Code:



 <div class="modal-body">

  

  <?php

  $tesid ='<div class="fetched-data"></div>';

  echo $tesid;

  ?>

      

   </div>

hasilnya pun sama , sesuai dengan id di database,
tapi ketika saya coba check dengan strlen variabel tersebut
ternyata jumlah isi variabel tersebut berbeda dengan id di database ( seharusnya 13 digit ), namun yang di tampilkan 32 digit.

untuk kasus ini , variabel tersebut tidak akan bisa digunakan untuk query data , karena informasinya tidak sesuai id..
mungkin agan2 ada yng tau gimana caranya memasukan hasil dari div class tersebut ke variabel ? maksud sy hasilnya saja bukan seluruh isi tag diivnya ?

Bagaiamana caranya membuat Edit Data di Modal Bootstrap dengan data yang di ambil dari database..???,, nah jika datanya diambil dari database, berarti data nya merupakan data yang dinamis... Untuk Membuat Input data di modal, cukup mudah...bukan...namun untuk membuat edit data di modal membutuhkan trik khusus.

Membuat Edit Data di Modal Bootstrap PHP MYSQLi

Ok.. pada kesempatan kali ini admin suckittrees.com akan berbagi trik dan tutorial singkat padat , dimana kita akan membuat Edit data di modal bootstrap dari data yang diambil dari database

OK.. langsung saja ya ..

Buat sebuah database dengan nama "mahasiswa" , kemudian buat tabel dengan nama "mhs" , dengan struktur :

id | nama | fakultas

kemudian insert kan data berikut kedalam tabel mhs

Sekarang kita buat file web nya :

koneksi.php

<?php 
// koneksi ke mysqli
$servername = "localhost";
$username = "root";
$password = "";
$db = "mahasiswa";
// Create connection
$koneksi = mysqli_connect($servername, $username, $password,$db);
// Check connection
if (!$koneksi) {
die("Connection failed: " . mysqli_connect_error());
}
?>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pagination</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <?php
  include 'koneksi.php';
  ?>
  <div class="col-sm-6" style="padding-top: 20px; padding-bottom: 20px;">
    <h3>DataTabels dengan PHP dan Bootstrap Suckittrees.Com</h3>
    <hr>
      <table class="table table-stripped table-hover datatab">
        <thead>
          <tr>
            <th>No</th>
            <th>Id</th>
            <th>Nama</th>
            <th>Fakultas</th>
            <th>Action</th>                         
          </tr>
        </thead>  
        <tbody>
          <?php 
          $query = mysqli_query($koneksi, "SELECT * FROM mhs");
          $no = 1;
          while ($data = mysqli_fetch_assoc($query)) 
          {
          ?>
            <tr>
              <td><?php echo $no++; ?></td>
              <td><?php echo $data['id']; ?></td>
              <td><?php echo $data['nama']; ?></td>
              <td><?php echo $data['fakultas']; ?></td>
              <td>
                <!-- Button untuk modal -->
                <a href="#" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $data['id']; ?>">Edit</a>
              </td>
            </tr>
            <!-- Modal Edit Mahasiswa-->
            <div class="modal fade" id="myModal<?php echo $data['id']; ?>" role="dialog">
              <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Update Data Mahasiswa</h4>
                  </div>
                  <div class="modal-body">
                    <form role="form" action="editmhs.php" method="get">
                        <?php
                        $id = $data['id']; 
                        $query_edit = mysqli_query($koneksi, "SELECT * FROM mhs WHERE id='$id'");
                        while ($row = mysqli_fetch_array($query_edit)) {  
                        ?>
                        <input type="hidden" name="id_mhs" value="<?php echo $row['id']; ?>">
                        <div class="form-group">
                          <label>Nama</label>
                          <input type="text" name="nama_mhs" class="form-control" value="<?php echo $row['nama']; ?>">      
                        </div>
                        <div class="form-group">
                          <label>Fakultas</label>
                          <input type="text" name="fakultas_mhs" class="form-control" value="<?php echo $row['fakultas']; ?>">      
                        </div>
                        <div class="modal-footer">  
                          <button type="submit" class="btn btn-success">Update</button>
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        <?php 
                        }
                        ?>        
                      </form>
                  </div>
                </div>
              </div>
            </div>
          <?php               
          } 
          ?>
        </tbody>
      </table>          
  </div>
</body>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
  <script>
  $(document).ready(function() {
    $('.datatab').DataTable();
  } );
  </script>
</html>

Perlu di perhatikan script edit di modal bootstrapnya diatas, berikut kodenya , saya ambil sebagian edit data saja , untuk memperjelas pengetahuan kita

kode php

Menampilkan data di modal php

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social