Fusebox PHP Indonesia

Pada tulisan sebelumnya kita membuat form input dengan combo box yang dinamis, untuk lebih memudahkan pembuatan combo box dinamis seperti itu kita dapat menggunakan plugin DynamiCombo. Plugin ini memerlukan library prototype.js sebagai base-nya.

Pertama-tama download dahulu source code DynamiCombo, kemudian pindahkan file tersebut ke direktori assets/js/. Buka kembali fuse dsp_form pada circuit data, hapus kode berikut :

<script src="assets/js/my_common.js"></script>
<script>
var post_province_id  = "<?php echo $data["province_id"] ?>";
var post_kabupaten_id = "<?php echo $data["kabupaten_id"] ?>";
var post_kecamatan_id = "<?php echo $data["kecamatan_id"] ?>";
var post_kelurahan_id = "<?php echo $data["kelurahan_id"] ?>";
</script>
<script src="assets/js/bps.js"></script>

kemudian ubah dengan kode berikut:

<script src="assets/js/dynamicombo.js"></script>
<script>
document.observe("dom:loaded",function(){
    new DynamiCombo("province_id", {
        "elements":{
            "kabupaten_id":{
                url:myself+"bps.getKab&ajax=1",
                value:'id',label:'name',
                init:"<?php echo $data["kabupaten_id"] ?>"
            },
            "kecamatan_id":{
                url:myself+"bps.getKec&ajax=1",
                value:"id",label:"name",
                init:"<?php echo $data["kecamatan_id"] ?>"
            },
            "kelurahan_id":{
                url:myself+"bps.getKel&ajax=1",
                value:"id",label:"name",
                init:"<?php echo $data["kelurahan_id"] ?>"
            }
        },
        "loadingImage":"assets/images/loader1.gif",
        "loadingText":"Loading..."
    });
});
</script>

Sintaks dasar dari DynamiCombo adalah :

new DynamiCombo ( root_id , options );

dimana root_id adalah id dari elemen induk, properti-properti options yaitu:

• elements, adalah elemen-elemen anak yang akan dihubungkan dengan elemen induk
  elements memiliki properti-properti:
  1. url, yaitu URL untuk Ajax Request
  2. value, yaitu field yang akan dijadikan atribut value pada tag option (<option value=”field_dari_server”>)
  3. label, yaitu field yang akan dijadikan label pada tag option (<option value=”field_dari_server”>field_dari_server</option>)
  4. init, yaitu nilai awal dari option (<option value=”nilai_awal”>)
• loadingImage, adalah path lokasi file gambar untuk pemrosesan
• loadingText, adalah teks yang ditampilkan ketika request ke server

Halaman pemrosesan harus mengembalikan data dengan format JSON sebagai berikut:

[
{'field11':'value-11','field12':'value-12','field13':'value-13',...},
{'field21':'value-21','field22':'value-22','field23':'value-23',...},
...
]

Untuk hasilnya silahkan lihat halaman Demo

Yerie Piscesa Javascript ajax, combo box dinamis, DynamiCombo, prototype.js