Siapkan HTML kosong bwat halaman
utama, pada header panggil dlu library jQuery nya:
<script language="”javascript”" src="”jquery-1.2.6.min.js”">
untuk interaktif user nya, gunakan Ajax jQuery Animation, atau dalam code nya dinamakan
sebagai AJAX DISPLAY
<script
language=”javascript”>
//show animation
$(function(){
$(“#ajax_display”).ajaxStart(function(){
$(this).html(<div
style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/>
<br><strong>Loading….</strong><br><br>Pleasebe
patien, do not close the window. <br>Gathering data beingprogress
…</div>);
});
$(“#ajax_display”).ajaxSuccess(function(){
$(this).html();
});
$(“#ajax_display”).ajaxError(function(url){
alert(jqSajax is error );
});
});
</script>
Sedangkan untuk simulasi load external file nya, Saya pake script random pada library jQuery
<script type="”text/javascript”">
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id="”random”"></div>
“sleep.php”adalah file external yang diload oleh javascript random, dengan timeout10000 (10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulang dari awal kembali (setelah 10 detik).
sleep.php berisi script yg akan di load, lu bisa isi apa aja seperti contoh code dibawah ini untuk simulasi gw kasiin sleep(10)
<?
sleep(10);
echo “<span style=font-weight:bold;font-color:green;> All Data loaded successfully !!</span>”;
?>
Jadi untuk lengkapnya, berikut code HTML na:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>jQuery Ajax Display</title>
<script language=”javascript” src=”jquery-1.2.6.min.js”></script>
<script language=”javascript”>
//show animation
$(function(){
$(“#ajax_display”).ajaxStart(function(){
$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien, do not close the window. <br>Gathering data beingprogress …</div>);
});
$(“#ajax_display”).ajaxSuccess(function(){
$(this).html();
});
$(“#ajax_display”).ajaxError(function(url){
alert(jqSajax is error );
});
});
</script>
<style type=”text/css”>
<!–
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
a:link {
color: #0066FF;
}
a:visited {
color: #0066FF;
}
a:hover {
color: #009900;
}
a:active {
color: #0066FF;
}
–>
</style></head>
<body>
<div id=”ajax_display”></div>
<div style=”position:absolute; top:100px;”>
<script type=”text/javascript”>
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id=”random”></div>
This is an Implementation for jQuery Ajax Display, while loading a progress from an external source.<br />
developped by <a href=”http://dremi.info” target=”_blank”>dr.emi</a></div>
</body>
</html>
Sekian dari Saya, Mohon Ma'af apabila banyak kesalahan.. Wassalamualaikum wr. wb.
