Cara buat konfirmasi delete dengan AJAX dan jQuery UI Dialog

Salah satu pengunjung website ini menanyakan bagaimana cara menyisipkan kode AJAX di dalam jQuery UI Dialog. Berhubung jawabannya cukup panjang, maka saya akan mengulasnya dalam sebuah artikel tersendiri, yang saat ini sedang Anda baca.

Di dalam artikel yang berjudul Desain Kotak Dialog Dengan jQuery UI saya sudah memberikan contoh bagaimana menambahkan tombol (misalnya Hapus, Batalkan) pada suatu kotak dialog. Nah, pada tombol tersebut kita bisa menyisipkan kode AJAX untuk menangani event yang terjadi pada saat tombol tersebut diklik oleh user.

Biar lebih cepat saya akan menggunakan kembali contoh kode pada artikel tersebut. Jadi silakan buka kembali artikel tersebut jika Anda belum sempat membacanya. Berikut ini kode untuk membuat kotak dialog dan tombolnya tersebut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(function() { $("#open-dialog").click(function(){ $("#dialog").dialog({ resizable: false, modal: true, draggable: false, width: 500, height: 210, buttons: { "Ya, Hapus": function(){ alert("Anda menghapus data"); }, "Tidak, Batalkan": function(){ $(this).dialog("close"); } } }); return false; }); });

Pada blok fungsi tombol Ya, Hapus di atas kita bisa menyisipkan kode AJAX untuk memanggil prosedur di server yang menangani proses penghapusan data. Untuk jelasnya, pada contoh ini saya akan menambahkan database untuk menyimpan data yang nantinya akan kita hapus.

Nah, berikut ini contoh struktur tabel tersebut (misalnya tabel propinsi):

1 2 3 4 5 6

CREATE TABLE propinsi ( id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, nama VARCHAR(50) NULL, ibukota VARCHAR(50) NULL, PRIMARY KEY(id) );

Langkah selanjutnya tambahkan beberapa data propinsi ke dalam tabel tersebut, misalnya sebagai berikut:

1 2 3 4 5 6

INSERT INTO propinsi (nama, ibukota) VALUES ('Daerah Istimewa Yogyakarta', 'Yogyakarta'), ('Jawa Tengah', 'Semarang'), ('Jawa Barat', 'Bandung'), ('Jawa Timur', 'Surabaya');

Langkah berikutnya kita buat halaman untuk menampilkan daftar propinsi tersebut dalam bentuk tabel. Sebagai contoh kita simpan halaman web tersebut dengan nama index.php. Pada file tersebut kita juga harus menambahkan kode untuk membuat kotak dialog konfirmasi.

Berikut ini contoh kode untuk menampilkan data propinsi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<table border="1"> <tr> <th>ID</th> <th>Nama</th> <th>Ibu Kota</th> <th>Tindakan</th> </tr> <?php while ($row = @mysql_fetch_assoc($data)): ?> <tr id="row-<?php echo $row['id'] ?>"> <td><?php echo $row['id'] ?></td> <td><?php echo $row['nama'] ?></td> <td><?php echo $row['ibukota'] ?></td> <td> <a href="edit_form.php?id=<?php echo $row['id'] ?>">Edit</a> | <a href="delete.php?id=<?php echo $row['id'] ?>" class="delete">Hapus</a> </td> </tr> <?php endwhile ?> </table>

Dan, berikut ini kode untuk membuat kotak dialog konfirmasi yang akan muncul pada saat user mengklik link Delete. Jangan lupa untuk menambahkan atribut style="display:none" pada blog DIV tersebut.

1 2 3

<div id="dialog" title="Konfirmasi" style="display:none;"> <p>Anda yakin ingin menghapus data tersebut?</p> </div>

Kode JavaScript untuk menampilkan kotak dialog tersebut kita letakkan di dalam blok HEAD atau bisa juga dalam file tersendiri. Contohnya yaitu sebagai berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$(function() { $(".delete").click(function(){ var request = $(this).attr("href"); // alamat URL dari request var record = $(this).parents("tr"); // alamat referensi dari baris tabel yang dihapus   $("#dialog").dialog({ resizable: false, modal: true, draggable: false, width: 500, height: 210, buttons: { "Ya, Hapus": function(){ // kode AJAX disisipkan di sini. }, "Tidak, Batalkan": function(){ $(this).dialog("close"); } } }); return false; }); });

Library jQuery mempunyai beberapa fungsi yang berkaitan dengan AJAX, contohnya ajax(), post(),get(), load(), dan sebagainya. Pertanyaannya sekarang, fungsi apa yang sebaiknya kita pakai? Kalau menurut saya fungsi apapun yang kita pakai tidak jadi masalah, karena masing-masing fungsi tersebut sebenarnya sintaks dan kegunaannya hampir sama.

Oleh karena itu pada kasus ini saya hanya akan menggunakan fungsi ajax() saja. Anda saya persilakan untuk bereksperimen dengan fungsi-fungsi lainnya.

Berikut ini sintaks fungsi tersebut:

jQuery.ajax(url, [setting]), atau
jQuery.ajax([setting])

Parameter url merupakan alamat URL tujuan dari request AJAX tersebut, pada kasus ini kita bisa menggunakan URL yang terletak pada atribut HREF dari tag A.

Contohnya:

1	<a href="delete.php?id=1" class="delete">Delete</a>

Sedangkan parameter setting sifatnya adalah opsional (tidak harus ada). Nilai parameter settingtersebut cukup banyak, Anda bisa melihat penjelasannya pada dokumentasi online yang ada di situs jQuery.

Berikut ini contoh kode untuk melakukan request AJAX dan bagaimana cara mengupdate tampilan tabel jika request tersebut sukses.

1 2 3 4 5 6 7

$.ajax({ url: request, // diambil dari atribut HREF pada tag A, lihat var request di atas success: function(){ $(record).remove(); // update tampilan baris yang telah dihapus $("#dialog").dialog("close"); // tutup kotak dialog } });

Kode selengkapnya bisa Anda download di sini. Selamat mencoba.
Sumber : http://www.sorsawo.com/2011/05/ajax-dan-jquery-ui-dialog/