jQuery Ajax Display for Loading Content

31 12 2008

What is jQuery ?
Apa sih jQuery itu
?

Image

jQuery
merupakan sebuahlibrary javascript yg
saat pertama kali muncul langsung berimbas padaberalihnya para
developper untuk segera memanfaatkan nya sebagailibrary yang powerfull
untuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapat
hitungan jari kelingking dari paradevelopper. Karena seperti motto
jQuery sendiri adalah “Write Less, Do More”. Wah pantes aja posisi ajax
langsung ketendang.

Berikutadalah tutorial sederhana
cara mengimplementasikan jQuery sebagailibrary yang powerfull, dapat
menciptakan interaktif user pada halamanwebsite lu :))

Sebelumnya download dlu library
nya:

Download
Page

jQuery 1.2.6 {The
Latest
Release}

jQuery Ajax Display for
Loading
Content

Siapkan
HTML
kosong
bwat halaman utama, pada header panggil dlu library jQuery
na:

Code:
<script
language="javascript"
src="jquery-1.2.6.min.js"></script>

untuk
interaktif
user na, gunakan Ajax jQuery Animation, atau dalam code na dinamakan
sebagai AJAX DISPLAY

Code:
<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>

Sedangkanuntuk
simulasi
load
external file na, gw pake script random padalibrary jQuery, script ini
gw temukan di salah satu forum luar, gw lupanama forum na, mudah2an
berguna bwat kalian:

Code:
<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)

Code:
<?
sleep(10);
echo
"<span style=font-weight:bold;font-color:green;> All Data
loaded successfully
!!</span>";
?>

Jadi
untuk
lengkapna, berikut code HTML na:

Code:
<!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>

woke,
siap
dicoba, klik disini bwat preview hasil
na:

Image

ni
bwat
download code na:

Image

 

Sumber dari situs Ilmu Website dalam kategori ajax dengan judul jQuery Ajax Display for Loading Content


Aksi

Information

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s




%d blogger menyukai ini: