jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. (sumber : wikipedia). Sudah ya artiinnya.. Ya seperti itulah, cari aja definisi yang tepat.
Saya pengen belajar untuk mengaplikasikan AJAX dengan menggunakan JQuery. Pada aplikasi sebelumnya, yang saya buat adalah insert data menggunakan PHP biasa, sekarang akan saya tambahkan AJAX dengan menggunakan JQuery untuk insert data. (Selanjutnya nanti akan di buat fungsi delete, pasa saya ada mood hehehe)
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 :
view source
print?
01 <!DOCTYPE HTML>
02 <html lang=”en-US”>
03 <head>
04 <title>Daily Notes</title>
05 <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
06 <meta charset=”UTF-8″>
07 </head>
08 <body>
09 <h2 >Daily Notes</h2>
10 <div id=”form_input”>
11 … //kode sebelumnya
12 </div>
13 <div id=”show”>
14 <?php $this->load->view('daily/show') ?>
15 </div>
16 <script type=”text/javascript”>
17 $('#submit').click(function(){
18 var form_data = {
19 date: $('#date').val(),
20 name: $('#name').val(),
21 amount: $('#amount').val(),
22 ajax:1
23 };
24
25 $.ajax({
26 url : “<?php echo site_url('daily/submit')?>”,
27 type : 'POST',
28 data : form_data,
29 success: function(msg){
30 $('#show').html(msg),
31 $('#date').val('<?php echo date('Y-m-d'); ?>'),
32 $('#name').val(''),
33 $('#amount').val('')
34 }
35
36 });
37
38 return false;
39 });
40 </script>
41 </body>
42 </html>
Sedangkan pada controller daily.php pada fungsi submit di ubah menjadi seperti berikut :
view source
print?
01 function submit()
02 {
03 if ($this->input->post('ajax'))
04 {
05 $this->MDaily->save();
06 $data['query'] = $this->MDaily->getAll();
07 $this->load->view('daily/show',$data);
08 }else{
09 if ($this->input->post('submit'))
10 {
11 $this->MDaily->save();
12 }
13 redirect('daily/index');
14 }
15
16 }
Sekarang coba untuk input data, semoga berhasil……….
Catatan, saya memanggil jquery langsung dari webnya, sehingga agar bisa di jalankan selcara offline, donload dahulu 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>
Sumber : dudu.web.id
