Dapatkan Value Untuk Modal (Bootstrap)

Andaikan kita ada berpuluh data dalam satu table, pilih satu untuk dipaparkan detailnya pada modal. Caranya dengan menggunakan jquery.

Disebabkan nak guna jquery, jadi include jquery.js adalah wajib.

Contohnya, pada setiap baris data, kita sediakan butang Hapus. Apabila klik butang hapus, sistem akan paparkan confirmation dengan detail data yang ingin dipadamkan itu.

Untuk memaparkan confirmation page, kita boleh gunakan modal. Untuk dapatkan maklumat paparan, kita gunakan javascript code. Jadi, di bawah ini adalah contoh butang hapus dalam baris data tersebut.

<td><a href="#grid-config" class="open-DelData btn btn-success" data-toggle="modal" data-id="<?php echo $row['pekerja_id']; ?>" data-nama="<?php echo $row['pekerja_nama']; ?>">Hapus</a></td>

Jika dilihat pada <a> ini, kita nampak href, class, data-toggle, dan beberapa attribute data-xxx.

href="#grid-config" Ini akan panggil modal, <div class="modal"...> yang menggunakan ID 'grid-config'. Contoh modal, <div class="modal" role="dialog" id="grid-config">

class="open-DelData btn btn-success" class biasanya panggil css. Jadi, untuk btn dan btn-success tu memang dari css. Tapi untuk class open-DelData, itu rekaan sendiri sahaja, tiada dalam css. class ini yang akan kita gunakan nanti pada jquery selector. Sekiranya tidak mahu guna class, boleh gunakan ID. Di javascript nanti, gunakan tanda # (untuk kes ID). Manakala tanda . untuk kes class. Cuma, bila data row berulang, ID dipanggil secara terus tidak sesuai digunakan kerana ID perlu unik. Jika tidak, ia akan ambil data pada row pertama, atau error.

Kita sentuh bab ID ini di post JQuery Selector ID Berulang.

data-toggle="modal" ini standard untuk panggil modal.

data-id="<?php echo $row['kr_kontrak_id']; ?>" dan data-nama="<?php echo $row['pekerja_nama']; ?>" dalam <a> yang sama, kita boleh cipta seberapa banyak data-xxx. Data inilah yang akan kita paparkan pada modal. JQuery automatik mengenali variable bermula dengan data- tersebut.

Bila pengguna klik <a> butang hapus tadi, sistem akan panggil modal di bawah

<div class="modal fade" role="dialog" id="grid-config">
  <div class="modal-dialog">
 <div class="modal-content">
 <form action="delete.php" method="post">
   <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title warna">Hapus Data</h4>
   </div>
   <div class="modal-body">
  <p>Anda pasti untuk menghapuskan data pekerja ini?</p>
  <input type="text" name="dataUID" id="dataUID" value="">
  <input type="text" name="dataNAMA" id="dataNAMA" value="">
  <p id="namaStaff"></p>
   </div>
   <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Tidak</button>
  <input type="submit" class="btn btn-success" value="Ya">
   </div>
 </form>
 </div>
  </div>
</div>

Kita lihat, div modal ini menggunakan id=grid-config. Manakala data kita panggil menggunakan input type=text dan idnya = dataUID dan dataNAMA.

dataUID dan dataNAMA ini belum boleh dipanggil. Perlu panggil menggunakan jquery terlebih dahulu. Selain panggil jquery.js terlebih dahulu, perlu juga panggil $(document).ready(); selepas itu.

<script src="jquery-1.8.3.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
 $(".open-DelData").click(function(){
  $("#dataUID").val($(this).data('id'));
  $("#dataNAMA").val($(this).data('nama'));
  $("#namaStaff").text($(this).data('nama'));
 })
} );
</script>

Di sinilah kita akan gunakan class pada tadi, iaitu open-DelData dengan cara (".open-DelData").click().

Di sini kita declare dataUID dan dataNAMA dan berikan nilai pada mereka dengan cara dapatkan value dari data-id dan data-nama tadi. Caranya dengan $("#dataUID").val($(this).data('id'));

Kita dapat lihat, val($(this).data('id')); tidak memanggil data(data-id), sebaliknya, data(id) sahaja. Ini kerana jquery telah mengenalpasti melalui attribute data- itu tadi. Sekarang, #dataUID sudah ada value. Cuma panggil dataUID sahaja pada <input /> dalam modal tadi.

Selain cara di atas, boleh juga cara yang lebih tersusun, satu-persatu seperti di bawah.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
 $(document).on("click", ".open-DelData", function () {
   var uid = $(this).data('id');
   $(".modal-body #dataUID").val(uid);
 });
} );
</script>

Atau lebih pendek seperti contoh asal di atas tadi, tetapi beritahu untuk modal-body. Contoh,

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
 $(".open-DelData").click(function(){
  $(".modal-body #dataUID").val($(this).data('id'));
 })
} );
</script>

Contoh sekiranya kita tidak gunakan class, tetapi guna id pada <a> tadi.

<td><a href="#grid-config" id="confirm-DelData" class="btn btn-success" data-toggle="modal" data-id="<?php echo $row['pekerja_id']; ?>" data-nama="<?php echo $row['pekerja_nama']; ?>">Hapus</a></td>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
 $("#confirm-DelData").click(function(){
  $("#dataUID").val($(this).data('id'));
 })
} );
</script>

Perhatikan, $("#confirm-DelData") adalah ID di <a> tadi. Bukan $(".open-DelData") yang menggunakan class. Tetapi tidak sesuai digunakan dalam kes ini. Contoh ini untuk tujuan kefahaman sahaja. Boleh lihat pada post yang menyentuh isu ini. [Jquery Seletor ID berulang]

Selain dari guna $(this).data('id'), boleh juga panggil guna attribute seperti di bawah.

var item = $(this).attr('data-id');

Contoh lengkap

<?php
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>Senarai Pekerja</title>
<link href="assets/plugins/jquery-datatable/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/datatables-responsive/css/datatables.responsive.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body class="">
<div class="header navbar navbar-inverse">
<h1>Senarai Pekerja</h1>
</div>

<div class="container">

  <div class="container">
    <div class="clearfix"></div>

    <div class="modal fade"  tabindex="-1" role="dialog" aria-hidden="true" id="grid-config">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title warna">Hapus Data</h4>
          </div>
          <div class="modal-body">
            <p>Anda pasti untuk menghapuskan data pekerja ini?</p>
   <input type="text" name="dataUID" id="dataUID" value="">
   <input type="text" name="dataNAMA" id="dataNAMA" value="">
   <p id="namaStaff"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Tidak</button>
            <button type="button" class="btn btn-success" data-dismiss="modal">Ya</button>
          </div>
        </div>
      </div>
    </div>

    <div class="content">

 <div class="page-title">
        <h3>Senarai <span class="semi-bold">Pekerja</span></h3>
      </div>
      <div class="row-fluid">
        <div class="span12">
          <div class="grid simple ">
            <div class="grid-title">
              <h4 class="warna">Senarai <span class="semi-bold">Pekerja</span></h4>
            </div>
            <div class="grid-body ">
              <table class="table table-hover table-striped table-condensed" id="example">
                <thead>
                  <tr>
                    <th style="width:1%">No.</th>
                    <th style="width:5%" data-hide="phone,tablet">Kategori</th>
                    <th style="width:25%">Nama Pekerja</th>
                    <th style="width:8%">Nilai Pendapatan (RM)</th>
                    <th style="width:10%" data-hide="phone,tablet">Tindakan</th>
                  </tr>
                </thead>
                <tbody>
<?php
$res = mysqli_query($con, "SELECT * FROM pekerja");
if($res)
{
    $bil = 1;
    while($row = mysqli_fetch_assoc($res))
    {
  echo "<tr>";
        echo "<td>".$bil.".</td>";
  echo "<td>".$row['kategori_pekerja']."</td>";
  echo "<td>".$row['pekerja_nama']."</td>";
  echo "<td>".number_format($row['jumlah_gaji'], 2)."</td>";
  echo "<td><a href=\"editpekerja.php?id=".$row['no_id']."\" class=\"btn btn-success btn-sm btn-small\">Kemaskini</a>&nbsp;";
  echo "<a href=\"#grid-config\" id=\"confirm-DelData\" class=\"open-DelData btn btn-success btn-sm btn-small\" data-toggle=\"modal\" data-id=\"".$row['no_id']."\" data-nama=\"".$row['pekerja_nama']."\">Hapus</a></td>";
  echo "</tr>";
        $bil++;
    }
}
?>    
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
   
    </div>
  </div>
</div>

<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-datatable/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script src="assets/plugins/jquery-datatable/extra/js/TableTools.min.js" type="text/javascript" ></script>
<script src="assets/js/datatables.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/* $("#confirm-DelData").click(function(){
  $("#dataUID").val($(this).data('id'));
 });
*/ 
/* $(document).on("click", ".open-DelData", function () {
   var uid = $(this).data('id');
   $(".modal-body #dataUID").val(uid);
 });
*/
 $(".open-DelData").click(function(){
  //$(".modal-body #dataUID").val($(this).data('id'));
  $("#dataUID").val($(this).data('id'));
  $("#dataNAMA").val($(this).data('nama'));
  //$("#namaStaff").text($(this).data('nama'));
  $("#namaStaff").html('Nama Pekerja: <strong>'+$(this).data('nama')+'</strong>');
 });
});

</script>
</body>
</html>