JQuery Selector ID Berulang

Friday, December 25, 2015

Sebelum ini, kita pernah sentuh berkenaan [Dapatkan Value Untuk Modal Bootstrap] tetapi ia menggunakan class untuk mendapatkan setiap data pada attribute berulang. Ia tiada masalah. Masalah timbul sekiranya kita mahu menggunakan ID, bukan class.

Bagi menggunakan ID berulang, cara kita panggil selector tersebut adalah dengan cara $('[id="confirm-DelData"]').click(function(){});, bukan $("#confirm-DelData").click(function(){});

Jika mahu lebih elok, letakkan elemen html pada awal selector tersebut. Jika guna <p>, letakkan p, jika guna <h1> letakkan h1, atau jika gunakan <a>, letakkan a. Contohnya tadi kita gunakan <a>, jadi sepatutnya begini, $('a[id="confirm-DelData"]').click(function(){});

Bagi lebih keterangan, mari kita lihat. Di bawah ini adalah <a> yang berulang tetapi memiliki ID yang sama.

<?php
while {
...
?>
 <a href="#grid-config" id="confirm-DelData" data-id="<?php echo $row['kr_kontrak_id']; ?>">Hapus</a>
<?php 
}
?>

Jadi, bila kita panggil selector ID, ia sepatutnya begini.

<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
 $('a[id="confirm-DelData"]').click(function(){
  $("#dataUID").val($(this).data('id'));
 });
} );
</script>

Bagi melihat contoh lengkap, kita masukkan code di atas ke dalam post berkenaan [Dapatkan Value Untuk Modal Bootstrap]. Lihat code di bawah.


<?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%">Kategori</th>
                    <th style="width:25%">Nama Pekerja</th>
                    <th style="width:8%">Nilai Pendapatan (RM)</th>
                    <th style="width:10%">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=\"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() {
 $('a[id="confirm-DelData"]').click(function(){
  $("#dataUID").val($(this).data('id'));
  $("#dataNAMA").val($(this).data('nama'));
  $("#namaStaff").html('Nama Pekerja: <strong>'+$(this).data('nama')+'</strong>');
 });
});

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

Posted by ayus at 9:19 PM  

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)