Tutorial Codeigniter: Penggunaan AJAX dengan JQuery Pada PHP
Pada input.php tambahkan script javascript yang berisi fungsi AJax menggunakan JQuery, jangan lupa pada head juga ditambahkan fungsi untuk memanggil JQuerynya. Sehingga input.php akan tampak seperti berikut :
<!DOCTYPE HTML> <html lang="en-US"> <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<h2 >Daily Notes</h2>
<div id="form_input">
... //kode sebelumnya
</div>
<div id="show">
<?php $this->load->view('daily/show') ?>
</div>
<script type="text/javascript">
$('#submit').click(function(){
var form_data = {
date: $('#date').val(),
name: $('#name').val(),
amount: $('#amount').val(),
ajax:1
};
$.ajax({
url : "<?php echo site_url('daily/submit')?>",
type : 'POST',
data : form_data,
success: function(msg){
$('#show').html(msg),
$('#date').val('<?php echo date('Y-m-d'); ?>'),
$('#name').val(''),
$('#amount').val('')
}
});
return false;
});
</script>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<h2 >Daily Notes</h2>
<div id="form_input">
... //kode sebelumnya
</div>
<div id="show">
<?php $this->load->view('daily/show') ?>
</div>
<script type="text/javascript">
$('#submit').click(function(){
var form_data = {
date: $('#date').val(),
name: $('#name').val(),
amount: $('#amount').val(),
ajax:1
};
$.ajax({
url : "<?php echo site_url('daily/submit')?>",
type : 'POST',
data : form_data,
success: function(msg){
$('#show').html(msg),
$('#date').val('<?php echo date('Y-m-d'); ?>'),
$('#name').val(''),
$('#amount').val('')
}
});
return false;
});
</script>
</body>
</html>
Sedangkan pada controller daily.php pada fungsi submit di ubah menjadi seperti berikut :
function submit()
{
if ($this->input->post('ajax'))
{
$this->MDaily->save();
$data['query'] = $this->MDaily->getAll();
$this->load->view('daily/show',$data);
}else{
if ($this->input->post('submit'))
{
$this->MDaily->save();
}
redirect('daily/index');
}
}
{
if ($this->input->post('ajax'))
{
$this->MDaily->save();
$data['query'] = $this->MDaily->getAll();
$this->load->view('daily/show',$data);
}else{
if ($this->input->post('submit'))
{
$this->MDaily->save();
}
redirect('daily/index');
}
}
Sekarang coba untuk input data,selamat mencoba
Catatan, pada kasus ini kita memanggil jquery langsung dari web-nya, sehingga agar dapat di jalankan secara offline, atau localhost download dulu jquerynya, kemudian arahkan ke jquery tersebut, sebagai contoh file jquery saya letakkan di direktori /javascript/jquery-1.3.2.js, maka baris ke lima di ubah menjadi
<script type="text/javascript" src="<?php echo base_url(); ?>javascript/jquery-1.3.2.js"></script>
No comments:
Post a Comment