Membuat Dialog jQuery Menggunakan CodeIgniter
Artikel Lain
Berikut Ini adalah implementasi sederhana penggunaan Dialog jQuery pada CodeIgniter.
Kali ini kita akan membuat suatu dialog menggunakan UI jQuery, dialog ini akan menampilkan form dan mengirimnya kembali ke server dengan menggunakan ajax.
Saya mengasumsikan bahwa anda sudah mengenal CodeIginter dan UI jQuery.
Pada Codeigniter,buatlah View dengan nama : v_dialog.php
Yang berisi script dibawah ini :
<html>
<head>
<title><?php echo $title;?></title>
<link type="text/css" href="<?php echo $base;?>config/js/theme/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo $base;?>config/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php echo $base;?>config/js/ui/ui.core.js"></script>
<script type="text/javascript" src="<?php echo $base;?>config/js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="<?php echo $base;?>config/js/ui/ui.resizable.js"></script>
<script type="text/javascript" src="<?php echo $base;?>config/js/ui/ui.dialog.js"></script>
<style type="text/css">
body {
font-size : 12px;
}
</style>
<script type="text/javascript">
$(function(){
//deklarasikan variable yg digunakan
var filename, titleText;
// action jika button cancel ditekan
var cancel = function(){
$('#ajaxDialog').dialog('close');
}
//action jika tombol OK ditekan
var execute = function(){
//mengambil semua data form dari tag form
var data = $('form').serialize();
//kirim nilai variable data ke /home/tampil, dan tampilkan kembali hasil dari /home/tampil
$.post('/home/tampil', data, function(data){
$('#ajaxDialog').html(data);
});
}
//setting dialog
var dialogOpts = {
modal: true,
width: 550,
height: 600,
autoOpen: false,
hide: true,
position: 'top',
closeOnEscape:true,
buttons: {
"Cancel": cancel,
"OK": execute
},
//setting ketika dialog terbuka
open: function() {
//hapus content yg berada di dalam id=ajaxDialog
$("#ajaxDialog").empty();
//memanggil file loading.gif, file ini akan terbuka sampil content form tampil
$("#ajaxDialog").html('<p align="center">Loading <img src="<?php echo $base?>config/images/loading.gif" /></p>');
//set title dialog
$("#ajaxDialog").dialog("option", "title", titleText);
}
};
//membuat dialog dengan variable dialogOpts yg telah dideklarasikan di atas
$("#ajaxDialog").dialog(dialogOpts);
//ketika id=action yang ada di dalam id=menu_top diklik
$("#menu_top").find("#action").click(function(e) {
//mengambil informasi untuk mengambil link form
//ambil informasi yg ada di attribute html href dan tampilkan dengan animasi fadeIn
filename = $("#ajaxDialog").load($(this).attr("href")).fadeIn('slow');
//mengambil informasi untuk title dialog
////ambil informasi yg ada di attribute html title
titleText = $(this).attr("title");
//tampilkan dialog
$("#ajaxDialog").dialog("open");
//mematikan action link
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="menu_top">
<div style="text-align:center;float:right; margin-left:10px;">
<a id="action" href="/home/tambah/" title="Tambah Baru">Tambah Siswa</a>
</div>
<div id="ajaxDialog"></div>
</body>
</html>
Lalu Buatlah view : v_form.php untuk membuat form yang akan ditampilkan di dalam dialog, berisi script berikut:
<form method="post">
Nama : <input type="text" name="nama"/> <br/>
Alamat : <input type="text" name="alamat"/> <br/>
Kota : <input type="text" name="kota"/>
</form>
Lalu buat controller home.php, dan isikan script berikut :
<?php
class Home extends Controller {
function Home()
{
parent::Controller();
$this->general = array(
'base' => $this->config->item('base_url')
);
}
function index()
{
$data = $this->general;
$this->load->view('v_home', $data);
}
function tambah()
{
$data = $this->general;
$this->load->view('v_form', $data);
}
function tampil()
{
echo "Nama = ".$_POST['nama']."<br/>";
echo "Alamat = ".$_POST['alamat']."<br/>";
echo "Kota = ".$_POST['kota']."<br/>";
}
}
Silahkan jalan di localhost anda...
Selamat Mencoba... :D
Kunjungi www.prowebpro.com untuk menambah wawasan anda.
Kunjungi www.prowebpro.com untuk menambah wawasan anda.