Skip navigation


(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)

Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.

JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.

Contoh penggunaannya

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function(){
			$("#kotak").load("test5_1.html");
			$("#button1").click(function(){
				$("#kotak").load("test5_1.html");
				return false;
			});
			$("#button2").click(function(){
				$("#kotak").load("test5_2.html");
				return false;
			});
		});
	</script>

	</head>
	<body>
<ul>
	<li><a href="" id="button1">Test 1</a></li>
	<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>

Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.

Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)

One Comment

  1. jquery memang handal dalam kosmetik ui..cuma kadang2 ia akan melambatkan pelayar


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: