Haloo teman-teman Dumet School. Kali ini saya akan membahas tentang cara Membuat Live Edit Menggunakan Ajax Javascript Part1. Dimana pada kasus ini saya akan membuat edit langsung di dalam table hanya dengan melakukan double click maka akan tampil tag input untuk melakukan edit text atau kalimat dan ketika di blur maka data tersebut akan melakukan update ke database dan hasil edit akan langsung tampil.

Oke untuk dapat Membuat Live Edit Menggunakan Ajax Javascript Part1 teman-teman siapkan terlebih dahulu databse yang akan di tampilkan di dalam table yang akan kita buat nanti. Dan desaign databasenya teman-teman bisa lihat gambar seperti di bawah ini.

Membuat Live Edit Menggunakan Ajax Javascript Part1

Jika sudah selesai teman-teman bisa isi beberapa data ke dalam database yang sudah di buat. Lalu sekarang kita lanjutkan untuk membuat struktur html seperti pada script di bawah ini.

Untuk struktur html di atas saya menggunakan bootstrap. Selanjutnya saya akan menampilkan terlebih dahulu data yang ada di database ke dalam table yang sudah disediakan. Karena disini saya harus menampilkan data dan melakukan edit. Maka saya buat function load_ajax dengan beberapa parameter agar lebih dinamis. Dan berikut ini scriptnya.

Kemudian kita lanjutkan untuk membuat function show untuk melakukan request ke database agar datanya di SELECT serta kita buat juga function generate_post untuk menampilkan datanya dengan innerHTML. Teman-teman bisa lihat script di bawah ini.

Demikian artikel tentang cara Membuat Live Edit Menggunakan Ajax Javascript Part1. Kita lanjutkan di part selanjutnya. Terima Kasih.