Auto Refresh Hanya Pada DIV Tertentu JQuery
Pada tutorial jQuery kali ini kita akan membuat script sederhana untuk melakukan auto refresh hanya pada div tertentu saja. Jadi ketika sebuah halaman web dibuka, elemen pada div tertentu akan melakukan auto refresh sesuai interval waktu yang kita tentukan tanpa harus refresh halaman web tersebut.
<div class="absensi">
<h5>Riwayat Absensi hari ini <br><?= date("d-m-Y") ?></h5>
<hr>
<table class="table" width="100%">
<thead>
<tr>
<th>FOTO</th>
<th>KARYAWAN</th>
<th>DIVISI</th>
<th>TANGGAL</th>
</tr>
</thead>
<tbody>
<?php if (!empty($riwayat)) : ?>
<?php foreach ($riwayat as $r) : ?>
<tr>
<td><img src="<?= base_url('assets/images/' . $r->foto) ?>" width="50" alt=""></td>
<td><?= $r->nama ?><br><?= $r->nisn ?></td>
<td><?= $r->kelas ?></td>
<td><?= $r->tanggal ?><br><?= $r->jam ?></td>
</tr>
<?php endforeach ?>
<?php else : ?>
<?php endif ?>
</tbody>
</table>
</div>Dalam contoh potongan program diatas, kita ingin agar tabel Riwayat Absensi menjadi real time. Jadi ketika ada karyawan yang absen, maka data langsung tampil di tabel tersebut tanpa harus melakukan refresh halaman web.
Dalam kasus ini kita akan menggunakan jQuery untuk melakukan auto refresh pada isi konten tersebut. Yang perlu diingat adalah bahwa lokasi tabel tersebut berada pada <div class="absensi"> . Nama kelas div absensi ini yang nanti akan menjadi atribut untuk fungsi auto refresh pada script jQuery.
Selanjutnya tambahkan kode javascript berikut untuk melakukan auto refresh menggunakan fungsi setInterval pada div yang kita inginkan (absensi).
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$(".riwayat").load(window.location.href + " .absensi" );
}, 3000);
});
</script>Dari script diatas nantinya konten yang berada didalam div absensi akan melakukan auto refresh dengan interval waktu 3000 mili detik atau 3 detik. Anda juga bisa menentukan waktu intervalnya sesuai kebutuhan.
