Load JQuery UI tips Form

Sobat Netter, ada berapa tips dalam memanggil file form, yang paling mudah adalah dengan menggunakan Jquery, Framework jquery sangat memberiakan kemudahan bagi seorang programmer web, seperti validasi form, load file, searching dan pagging dll, Pada sesi ini saya akan mencoba membahas car memanggil halaman lain dengan bantuan jquery ui dialog dengan tips function load, load("addform") , berikut langkahnya;
pertama anda harus menentuakan sebuah object selector (jika item yang di click akan menampilkan dialog),
Perhatikan gambar di samping (tanda panah) adalah icon jika di klik akan menampilkan file (dialog form),
Langkah selanjutnya sebagai berikut;



Langkah kedua: anda memanggil file lib jquery:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>

Langkah Ketiga buat script javascript sebagai berikut

<script type="text/javascript">
$(document).ready(function(){
//define config object
var dialogOpts = {
title: "MY APLICATION",
modal: true,
autoOpen: false,
height:'auto',
position:'top',
width: 400,
buttons: {
"Submit": function() {
document.kirim.submit(); // kirim = name form
}
"Close": function() {
$(this).dialog("close");
}
},
open:function() {
//display correct dialog content
$("#data").load("addform.php");
}
};
$("#data").dialog(dialogOpts); //end dialog

$("#addnew").click(
function(){
$("#data").dialog('open');
return false;
}
);
//
});

</script>

Langkah Kekempat buat tag html untuk menampilankan object yang di load oleh jquery:

<div id="data"></div>


Hasilnya seperti gambar seperti diatas;