Home > Menengah > Web Development > Tutorial Ajax > jQuery Ajax Display for Loading Content

.

1 komentar BYAdmin Ilmuwebsite

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

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



One Response

  1. bakazero

    wah lebih bagus lagi kalo script nya pake plugin wordpress… keren deh ^_^


eXTReMe Tracker