Kemarin saya mendapatkan error sederhana yang cukup memakan waktu. Memang kesulitan dalam mendevelope aplikasi yang sebelumnya telah di bangun oleh orang lain adalah kita harus mempelajari behaviour developer sebelum kita tersebut. Karena setiap orang pasti memiliki pola dan design tersendiri dalam mengkonstruksi algoritma yang ada didalam pikirannya masing-masing.
Nah, pada aplikasi yang sedang saya kerjakan (yang sebelumnya telah dikerjakan orang lain), terdapat dua behaviour yang berbeda. Ada yang mengkonstruksi pembuatan tabel pelaporan didalam javascript dan ada yang didalam controller (Codeigniter). Masalahnya muncul ketika saya hendak membuat sendiri laporan tabel pada javascript. Tabel yang saya buat telah terbentuk dan sempat muncul beberapa saat dan akhirnya menghilang. Padahal saat saya membuat tabel tersebut di dalam fungsi controller muncul dengan sempurna. Saya sempat dipusingkan dengan hal ini.
Usut punya usut, ternyata terdapat sedikit perbedaan yang cukup berbeda, dan saya cukup bodoh :D Jika pada pembuatan tabel di fungsi controller, button actionnya bertipe "submit".
<input id="dg_pasien_cari" name="cari" value="Cari" type="submit">
Dan fungsi membuat table yang berada pada javascript menggunakan button action bertipe "button".
<input type="button" id="rm_pekerjaan_cari" value ="Buat Laporan">
Lalu apa perbedaan mendasar dari dua tipe tersebut, sejauh yang saya tahu saat ini adalah:
1. Jika menggunakan button bertipe "submit" maka button akan menggenerate method yang terdapat dalam form action. Jadi dalam hal ini fungsi submit yang terdapat dalam suatu form pasti mengerjakan form actionnya. Bahkan jika kita tidak mendefinisikan fungsinya (misal, anda hanya membuat tag <form></form>). Maka secara default, form akan memiliki method "get" dan mengirimkan nilai-nilai yang terdapat didalam form tersebut.
2. Sedangkan button yang bertipe "button" tidak mesti menjalankan method yang ada didalam form tersebut. Biasanya kita menggunakan button bertipe "button" ini jika kita ingin mendefinisikan aksi apa yang akan dilakukan button tersebut kedalam javascript. Dalam hal ini saya mengintervensi fungsi button tersebut dengan "id".
Nah, mulai kelihatan kesalahannya. Saya hendak membuat pembentukan tabel di dalam javascript namun menggunakan aksi bertipe submit. Maka aplikasi pertama kali akan menuju kepada javascript, dalam javascript tersebut meminta method POST dan memanggil data-data lalu mengkonstruksi tabelnya, kemudian tabel tersebut disisipkan kedalam html. Tapi karena menggunakan method submit prosesnya tidak berhenti disitu, setelah tabel dalam javascript muncul didalam html, button submit tersebut kemudian menjalankan method form actionnya. Nah pada bagian inilah tabel yang saya buat tiba-tiba menghilang. Karena form action tersebut merefresh halaman htmlnya.
Jika dirunut maka prosesnya seperti ini :
button klik --> button memicu action javascriptnya --> javascript menjalankan post dan mengambil data-data -->javascript mengkonstruksi table --> javascript menyisipkan tabel tersebut kedalam html --> tabel muncul --> button memicu form action --> form action menjalankan fungsinya ("post" atau "get") --> halaman ter-refresh --> tabel menghilang!!!
Haha, ini kan dasar banget. Kok bisa-bisanya ya.. Ya, stupid of me! Tapi kan memang begitu, belajar adalah sebuah perjalanan dari satu kebodohan menuju ke kebodohan berikutnya *ngelesnya kayak bajaj*
Anda bertanya, lalu gimana solusinya? ya tinggal ganti type "submit" menjadi "button". Kesimpulannya,
1. Jika ingin membuat tabel di javascriptnya gunakan type "button" agar form methodnya tidak ikut tergenerate
2. Jika ingin membuat tabel di dalam fungsi php/controller, gunakan type "submit".
Cukup sekian penjelasannya, semoga bisa mencerahkan. Kalau ada penjelasan saya dirasa kurang tepat atau salah. Bisa tolong ditegur dan diberi masukan yang lebih baik. Sekian.
Salam.
terimakasih🍉
BalasHapus