Tutorial kali ini akan menampilkan langkah demi langkah bagaimana caranya melakukan auto refresh pada sebuah halaman web. Adakalanya kita ingin menampilkan sebuah halaman web yang setiap beberapa detik secara otomatis menampilkan data atau informasi terbaru (update). Misalnya:
Dalam beberapa kasus kita temui,
a. menampilkan pesan yang masuk dalam inbox
b. menampilkan jumlah order keranjang belanja
Untuk menerapkannya ke dalam sebuah web, kita memerlukan perintah auto refresh secara otomatis atau berkala. Untuk tutorial kali ini kita akan menggunakan jQuery.
Berikut ini skrip yang digunakan untuk melakukan hal tersebut:
<!DOCTYPE html>
<html>
<head>
<title>Autoload</title>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script>
setInterval(function() { $(".tempat").load("file.txt"); }, 5000);
</script>
</head>
<body>
<div class="tempat">
Ini div yang akan di refresh dengan jquery .
<div>
</body>
</html>
1. Donwload file jQuery terbaru
2. Siapkan satu buah file dengan nama file.txt
Keterangan skrip:
5000(milisecond) adalah interval div saat di refresh. Berarti div akan di refresh setiap 5 detik. load disini akan memuat file yang akan ditampilkan.
Dengan menggunakan fitur autoload ini, kita tidak harus meload atau refresh seluruh halaman, namun bisa kita atur berdasarkan div (content) tertentu.
Silahkan teman-teman dapat mengembangkan skrip yang sederhana ini sesuai dengan kebutuhan aplikasi yang sedang di buat.