Kita mungkin ingin membuat suatu halaman yang isinya berubah sesuai yang diinput ke dalam database. Informasi ini dapat juga diaplikasikan ke chat online. Untuk kali ini kita akan membuat sebuah halaman yang isinya akan diupdate setiap 30 detik dari halaman lain.
Misal div untuk tayang adalah tayang seperti berikut ini:
<div id=”tayang”>
</div>
Kemudian coding untuk timer dan mengambil dari halaman lain adalah:
function ambildata()
{
$.get( “iklan.php”, function( data )
{
if (data.length>6)
{
$( “#tayang” ).html(data);
}
}
);
window.setTimeout(ambildata, 30000);
}
Dalam contoh di atas kita akan menampilkan iklan di mana meterinya diambil dari iklan.php . Kemudian program akan memanggil dirinya setelah 30 detik, dengan demikian maka setiap 30 detik program akan mengambil informasi dari iklan.php. Format data pada iklan.php adalah html.
Kemudian kita ingin program ini dimulai pada detik 0:
function detikpertama()
{
var d = new Date();
var n = d.getSeconds();
if (n<1)
{
ambildata();
}
else
{
window.setTimeout(detikpertama, 500);
}
}
Pada contoh di atas kita akan menjalankan ambildata jika posisi detik adalah 0.
Coding lengkapnya adalah:
<html>
<script src=”../development-bundle/jquery-1.6.2.js”></script>
<body style=”overflow:hidden”>
<div id=”tayang”>
</div>
<script>
function ambildata()
{
$.get( “iklan.php”, function( data )
{
if (data.length>6)
{
$( “#tayang” ).html(data);
}
}
);
window.setTimeout(ambildata, 30000);
}
function detikpertama()
{
var d = new Date();
var n = d.getSeconds();
if (n<1)
{
ambildata();
}
else
{
window.setTimeout(detikpertama, 500);
}
}
detikpertama();
</script>
</body>
</html>
Informasi lebih lanjut silahkan mengunjungi:
1. http://api.jquery.com/load/ .
2. http://www.w3schools.com/jquery/jquery_ajax_load.asp .
3. http://www.w3schools.com/js/js_strings.asp .
4. http://www.w3schools.com/jsref/met_win_settimeout.asp .
5. http://www.w3schools.com/js/js_timing.asp .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
