Masih berkaitan dengan javascript ne.. hehe, tapi menyangkut masalah bootstrap sedikit ya. Yaitu kita akan membahas tentang cara menampilkan modal bootstrap secara dinamis.

Apa itu maksudnya? Jadi misalkan kita punya tabel dengan banyak baris dan kita menginginkan bila kita klik salah satu baris, maka data pada baris tersebut akan muncul di dalam kotak modal bootstrap. Contohnya bila kita mengklik baris 1, maka data yang muncul pada modal adalah data baris 1, Bila kita klik baris 2, data yang muncul pada kotak modal bootstrap adalah data baris 2 dan seterusnya.

Menampilkan modal bootstrap secara dinamis

Langsung saja kita mulai membuatnya.

Step 1 : Buatlah folder, misalkan namanya ‘modal’. Masukkan bootstrap.css, bootstrap.js, serta jquery.js pada folder tersebut sehingga tampilan folder anda menjadi seperti berikut ini.
modal bootstrap
Step 2 : Buatlah file index.php dengan kode sebagai berikut :

Step 3 : Buatlah file hasil.php dengan kode sebagai berikut :

Jalankan index.php melalui browser, cobalah untuk meng klik link show pada masing-masing baris, maka akan tampil modal dengan isi data sesuai dengan baris yang kita klik.

Berikut ini adalah screenshot bila kita klik baris nomor 2 :

modal bootstrap

Penjelasan :

Cara kerja kode ini cukup sederhana, yaitu pada baris 49 s/d 59 index.php, kita menggunakan event clik pada link yang memiliki class ‘edit record’ dan mengirimkan datanya ke hasil.php. Data yang dikirimkan yaitu ‘data-id’ yang merupakan atribute yang kita buat sebagai tempat id. Respon atas pengiriman ajax tersebut di tampilkan dalam modal-body . Sehingga tampilah data id dalam modal box.

DEMO | DOWNLOAD

Pada praktek sebenarnya anda dapat membuat data-id secara dinamis dengan menggunakan loop php, serta membuat hasilnya responsenya menjadi dinamis dengan mengambil data sesuai data-id yang dikirim.

Mudah bukan, selamat mencoba. Bila ada pertanyaan silahkan ditulis di komentar ya. Terima kasih telah berkunjung ke harviacode.com