Codeigniter Dasar – Menghapus data dengan Jquery


Untuk menghapus data menggunakan Ajax dengan Jquery, sebenarnya tidk terlalu sulit. Dengan menggunakan data yang terdahulu pernah kita buat. Kita mempunyai 2 view yaitu show.php dan input.php. Ubah show.php untuk meletakkan fungsi Jquery yang digunakan untuk mengirim data secara Ajax dan memanggil Controller untuk menghapus data. Kemudian Jquery akan menghilangkan baris dengan triger class pada barisnya dengan fungsi animate. Ah terlalu bertele-tele hahahaha bikin ribet, padahal dalam codingnya tidak terlalu banyak perubahan.

Tambahkan script berikut pada view show.php pada aplikasi ci_ku yang kita buat sebelumnya :), sehingga show.php akan menjadi seperti berikut :

<script type="text/javascript">
$(document).ready(function() {

 $(".delbutton").click(function(){

 //Save the link in a variable called element
 var element = $(this);

 //Find the id of the link that was clicked
 var del_id = element.attr("id");

 //Built a url to send
 var info = 'id=' + del_id;
 if(confirm("Anda yakin akan menghapus?"))
 {
 $.ajax({
 type: "POST",
 url : "<?php echo site_url('daily/delete')?>",
 data: info,
 success: function(){
 }
 });

 $(this).parents(".record").animate({ opacity: "hide" }, "slow");

 }

 return false;

 });

})
</script>
<b>Daily Notes</b>
<table border="1">
 <tr>
 <th>No</th>
 <th>Date</th>
 <th>Name</th>
 <th>Amount</th>
 <th>Delete</th>
 </tr>
 <?
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td>$i</td>";
 echo    "<td>$row->date</td>";
 echo    "<td>$row->name</td>";
 echo    "<td>$row->amount</td>";
 echo      "<td><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>

Perhatikan pada baris ke 53 yaitu pada bagian menampilkan link delete, tampak seperti di atas

echo "<td><a class=\"delbutton\" id=\"$row->id\"  href=\"#\" >Delete</a></td>";

Script javascript di ataslah (baris 133) yang digunakan Jquery untuk mengirimkan data ke controller daily dan menjalankan fungsi delete. Kemudian ubah link delete (baris 53), tambahkan id sebagai data yang akan dihapus dan class delbutton sebagai triger pada Jquery untuk menjalankan fungsi hapus ini.
Jangan lupa ubah controller daily pada fungsi delete menjadi seperti dibawah ini :

function delete()
 {
 $id = $this->input->post('id');
 $this->db->delete('daily', array('id' => $id));
 }

Selesai.. Saya ingin membuat halaman demonya, tetapi belum sempat. Kalo mau download source lengkapnya silahkan ambil di sini

  • saya sudah coba tutorial di ats,, tapi begitu saya jalankan di browser dan stelah klik delete dan muncul peringatan “Anda yakin akan menghapus ?” kq ga terefresh ya,,, jadi harus di refres dulu baru hilang datax,,

    • harusnya memang tidak refresh, karena dilakukan dengan ajax jquery. kalo baris terakhir tidak hilang, kemungkinan ada error di bagian javascript anda

  • adi saputra

    mas, kok g iso di donlot tho….?

    • maff file nya sudah saya ganti 🙂 coba cari di github saya 🙂

  • keren gan..

    • sama-sama… thx koreksinya 🙂

  • dede iin

    mas dudu boleh minta source buat tutor yg ini…

    trims,,,,

    • Wah saya sudah ga punya file nya.. silahkan dicoba dulu, kalo ada masalah bisa ditanyakan 🙂

  • dede iin

    dah d coba mas..
    tapi ko ga jalan ea.. delete nya…
    knp ea mas…

    • Artikel ini adalah berkelanjutan dari artikel sebelumnya, kalo tidak mengikuti artikel sebelumnya, kemungkinan error akan terjadi.

      Cek, apakah path jquery sudah benar?
      Cek, apakah script untuk jquery sudah benar?

  • om dudu klo codeigniter bisa pake CSS gk ??
    klo bsa gmn caranya bkinn tutorialnya om ,…
    heu ^_^

    • bisa donk, css biasanya di kasih di folder rootnya, nanti di panggil di view 🙂

  • qaribun

    kang maw ganti tampilan backgroung nya gimana kang

    • ya di edit di view nya 🙂 ataw pake css

  • syuper sekali om .. eh om mau nanya nih

    $(this).parents(".record").animate({ opacity: "hide" }, "slow");
    

    makusnya gimana ? mohon pencerahan … tetang success ajax jquerynya .. tanks gan ..

    • sakjannya itu buat ngilangin baris yang dihapus, jadi itu efek pas di klik nanti barisnya hilang, terus mengerjakan delete record, gitu kira-kira

  • mas kok gk bisa download filenya ??

    • ya, sudah saya hapus.. Maaf 🙂

  • Budi

    Bos, gua dah coba… tapi ada yang salah nih… $(“.delbutton”) is null. jadi gua ga bisa pake… bisa minta sedikit pencerahan….

  • loserkids

    wah Mas thanks ya tutorialnya..

    sangat bermanfaat…khususnya saya pemula…

    oh ya saya pengen tahu nih mas…kalau

    [PHP](this).parents(“.record”).animate({ opacity: “hide” }, “slow”);[/PHP]

    kan buat effect jquery buat delete..

    nah effek jquery untuk input data /nambah record mas itu gimana kodingnya?
    biar efeknya seperti effect delete punya mas…

  • Mas,,knpa ya yg saya coba kok kyak yg ga ke baca javascript nya.. Konfirmasi “Anda yakin akan menghapus?” pun ga muncul2… Knpa yak??

    • dwijonarko

      sudah di cek lokasi javascriptnya? sudah betul path nya?

      • udah mas,,

        • dwijonarko

          silahkan periksa dengan firebug

        • Functinvarrun

          di tulisan delete kasih id delete

  • disqus_fDqTTiWHdk

    mau tanya nih mas..

    saya udah coba tapi setelah muncul peringatan “Anda Yakin Akan Menghapus?” trus klik ok,knpa ga jln ya script buat delete nya?mohon pencerahannya ya