Siapkan HTML kosong bwat halaman
utama, pada header panggil dlu library jQuery nya:
untuk interaktif user nya, gunakan Ajax jQuery Animation, atau dalam code nya dinamakan sebagai AJAX DISPLAY
Sedangkan untuk simulasi load external file nya, Saya pake script random pada library jQuery
Jadi untuk lengkapnya, berikut code HTML na:
Sekian dari Saya, Mohon Ma'af apabila banyak kesalahan.. Wassalamualaikum wr. wb.
<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(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.
saya mau tanya,, cara membuat countdown bagaiman,,
ReplyDeleteagar kalau di refresh masih tetap berjalan, tidak mungulang dari awal,,
tetapi kalau di submit waktu di ulang dari awal,,
menggunakan ajax/php
mohon pencerahannya