Modal windows adalah popover yang paling umum digunakan untuk meminta input dari pengguna. Add Edit Komentar dengan jendela dialog modal akan meminimalkan upaya desain. Ada berbagai cara untuk menampilkan popover sebagai jendela pop-up, kotak dialog atau overlay. Dalam tutorial ini, saya telah menunjukkan kotak dialog untuk menampilkan form tambah / edit komentar.

Dalam contoh ini, saya telah menggunakan Dialogify library berbasis jQuery untuk menampilkan jendela modal. jQuery Dialogify adalah plugin yang mudah, ringan dan dapat disesuaikan. Plugin Dialogify memungkinkan pengguna untuk memasukkan segala jenis HTML ke dalam kotak Dialog. Ini juga mendukung pengguna untuk bermain-main dengan event call back.

Dalam sistem komentar PHP AJAX ini, jendela modal digunakan untuk menampilkan form HTML untuk menambahkan komentar edit. Fungsi jQuery AJAX digunakan untuk mengimplementasikan sistem komentar berbasis AJAX di PHP.

Ada berbagai cara untuk menampilkan kotak dialog dengan menggunakan plugin Dialogify ini. Saya telah membuat file terpisah dengan komentar tambahkan dan edit form HTML. Saat menginisialisasi plugin Dialogify, nama file ini ditentukan untuk memuat form HTML ke dalam jendela dialog. Saya telah mempelajari cara melakukan add edit dengan kotak dialog menggunakan jendela jQuery modal.

Tampilan HTML List Add dengan Opsi edit Komentar

Ini adalah halaman utama yang memuat file library dependen dan menginisialisasi fungsi library untuk membuat output yang diharapkan. Saat memuat halaman ini, data komentar dinamis diambil dari database dan ditampilkan dalam daftar dengan opsi untuk menambahkan komentar baru. Juga, setiap baris komentar akan memiliki opsi edit. Event klik tambah dan edit kontrol akan memicu plugin Dialogify.

jQuery Script to Call berfungsi untuk Menambahkan Edit Komentar

Semua kode JavaScript jQuery ada di file editRecords.js. Dalam file ini, ini berisi event handlers dan juga termasuk handlers aksi edit. Dalam kode ini, Dialogify jQuery diinisialisasi dan memuat form tambahkan komentar edit terkait pada event klik sisipan atau edit kontrol.

Proses inisialisasi membutuhkan HTML atau sumber untuk dimuat dalam bentuk dialog atau modal. Selain itu, diperlukan serangkaian opsi seperti judul, spesifikasi tombol jika ada. Dalam contoh ini, saya telah menetapkan pengaturan untuk dua tombol Oke dan Batal. Dengan mengklik Oke, tindakan Tambahkan Edit komentar akan dilakukan melalui AJAX.

Setelah melakukan tindakan menambah atau mengedit yang berhasil, data komentar yang baru-baru ini diperbarui akan dimuat ke UI. Panggilan balik sukses AJAX adalah titik yang tepat di mana kode ditulis untuk mendapatkan respons AJAX dan memperbarui komentar UI dengan data respons.

Output dari script di atas

Cara Menambahkan Edit dikomentar dengan jQuery Dialogify part 1

WhatsApp chat