[Yii Framework] AJAX (Dependent Dropdownlist) in Multi Value / Grid Form

Biasanya kita menggunakan extension Jappendo untuk mengatasi masalah input one to many atau penginputan banyak data sekaligus.. Selama menggunakan JAppendo, kesulitan saya adalah ketika ingin menerapkan AJAX pada masing-masing inputan yang ada. Sebagai contoh adalah masalah penerapan dependent dropdownlist seperti gambar berikut :

Saya memiliki tabel provinsi dan tabel kabupaten/kota. Inputan di atas bisa saya modifikasi ingin menginput 5 row, 7 row, dll pokoknya bisa saya tambah dan kurangi.. Jika di jappendo kita sudah bisa membuat hal tersebut tentunya.. Tapi permasalahannya adalah jumlah kabupaten di Indonesia adalah ratusan. Sehingga saya ingin ketika saya memilih provinsi maka yang tampil pada kolom kabupaten adalah kabupaten dari provinsi yang telah saya pilih saja.. Dan itu harus berlaku untuk semua row yang ada dimana hasilnya nanti adalah seperti gambar berikut :

Anda dapat lihat pada gambar di atas bahwa masing-masing row menampilkan list kabupaten yang berbeda sesuai dari Provinsi yang telah terpilih masing-masing..  Salah satu buktinya adalah dropdownlist yang berbeda-beda panjangnya..

Okeh, itulah permasalahan yang akan kita bahas. Lalu bagaimana cara mengimplementasikannya?? Pada kasus ini, saya harus selingkuh dari Jappendo untuk berpaling pada jqrelcopy. Hal pertama yang harus kita lakukan adalah mendownload terlebih dahulu extension jqrelcopy lalu masukkan ke dalam folder extension seperti biasa. Kemudian mari kita definisikan jqrelcopy pada code tampilan kita :

 <?php 
   $this->widget('ext.jqrelcopy.JQRelcopy',array(
    'id' => 'copylink',
    'removeText' => 'Remove',   // text yang akan muncul pada link remove
    'removeHtmlOptions' => array('style'=>'color:red'),
    'options' => array(
          'copyClass'=>'newcopy',
          'limit'=>5,  // batas row yang diizinkan pada jqrelcopy
          'clearInputs'=>true,
          'excludeSelector'=>'.skipcopy',
     )
   ));
 ?>

 <a id="copylink" href="#" rel=".yangdicopy">Tambah</a>   // link yang akan digunkan untuk menambahkan row baru. Pada code ini terdapat attirbute (rel=".yangdicopy") yang artinya ketika kita meng klik pada link ini maka akan meng copy tampilan class "yangdicopy"

 <div class="row yangdicopy">
 <?php echo CHtml::dropDownList('provinsi[]','',
         CHtml::listData(ModelProvinsi::model()->findAll(),'kode_daerah', 'nama_daerah'),
         array(
          'onChange' => CHtml::ajax(array(
            'type'=>'POST',
            'dataType'=>'json',
             'url'=>array('namaController/namaAction'),  // action yang dipanggil pada perintah AJAX
            'data' => "js:{haha:$(this).val(),idnya:$(this).attr('id')}",  // memberikan nilai provinsi yang dikirim dan mengirim row yang ke berapa yang sedang digunakan
            'success'=>"function(data){
               var kabu='#kabupaten'+data.idnya;  // mendefinisikan row kabupaten mana yang akan di edit. Ini kita definisikan sendiri dengan algoritma yang kita buat
               $(kabu).html(data.satu);  // menginput daftar kabupaten pada row kabupaten yang terpilih
             }",
          )),'empty'=>'Pilih Provinsi',
      )); ?>
     <?php echo CHtml::dropDownList('kabupaten[]','',array(),array('empty'=>'-- Pilih Kabupaten --')); ?>
 </div>

Code di atas adalah code yang tersaji di halaman tampilan kita.  Seblumnya, kenapa kita tidak menggunakan JAppendo pada kasus ini ? karena jappendo tidak membedakan nama control yang ada pada row. Misal row pertama memiliki id=kabupaten, row ke 2 juga id=kabupaten, row ke 7 juga id=kabupaten sehingga kita kesulitan untuk mengidentifikasinya. Sedangkan pada jqrelcopy tidak pada row pertama id=kabupaten, row ke-2 id=kabupaten2, row ke-7 id=kabupaten7. Nah, dengan begitu kita paling tidak bisa tahu mana yang membedakan masing-masing row.

Pada code di atas sendiri kita menangkap id dari control “provinsi” yang sedang kita pilih. Jadi paling tidak kita tahu kita sekrang sedang memilih provinsi, provinsi2, provinsi7 atau yang mana? Sehingga jika provinsi3 yang dipilih, maka perubahan akan terjadi pada control “kabupten3″. Untuk itulah saya mengirimkan nilai id dari control yang kita pilih ke controller. Kemudian kita lakukan pendeteksian nomornya pada controllernya. Berikut controller yang kita panggil dari AJAX sebelumnya :

public function actionKab()
 {
    $satu='';
    $idnya='';
    if(isset($_POST['haha']))
    {
       $datanya=ModelKabupaten::model()->findAllByAttributes(array('kode_provinsi'=>$_POST['haha'])); // memanggil semua list kabuaten yang dimiliki provinsi yang telah dipilih
       $list=CHtml::listData($datanya,'kode_kab','nama_kab');

       foreach($list as $value=>$name) // menginput semua kabupaten yang telah terpilih untuk dimasukkan ke sebuah nilai
       {
          $satu.=CHtml::tag('option',
             array('value'=>$value),CHtml::encode($name),true);
       }
    }
    if(isset($_POST['idnya']))
    {
       if(strlen($_POST['idnya'])>8)
       {
          $idnya=substr($_POST['idnya'],8); // mengambil angka yang ada pada control yang telah kita pilih. Nama dari id yang dikirim nantinya adalah provinsi/provinsi1/provinsi3/prorinsi100. Kita ingin mengambil nilai yang ada di belakang kata provinsi saja. Maka dari itu kita substring dengan start mulai dari huruf ke-8. Yang artinya kita akan mendapatkan angkanya saja..
      }
      else
      {
          $idnya='';
      }
    }

    echo CJSON::encode(array // mengkonversi nilai yang sudah ada ke dalam format JSON
    (
       'satu'=>$satu,
       'idnya'=>$idnya,
    ));
    Yii::app()->end();
 }

Yak itulah dia codingnya.. Walau harus di akal-akali terlebih dahulu tapi paling tidak bisa berjalan sesuai keinginan kita..

Selesai.. Selamat mencoba..

Semoga membantu… :)

About these ads

19 Responses to [Yii Framework] AJAX (Dependent Dropdownlist) in Multi Value / Grid Form

  1. junithe says:

    mas tau ndak cara bikin collapsible ato expandable menu di yii, pake extension apa ya kalo ada…
    makasi

  2. itu ada di jquery mas.. saya lupa namanya.. kalo pake extension saya ga tau juga ada apa ga mas..

  3. chil_jj says:

    cara savenya sama kayak jappendo kak??

  4. sarah says:

    ka mau tanya kl bikin validasi di setiap row yg ditambah bisa gak, misal pilih propinsi pertama, pas mau tambah propinsi yang kedua, nama propinsi yang udah diambil dari yg pertama udh gak ada lagi. terima kasih

  5. wah, kalo gitu harus cukup banyak code dan pasti sangat ribet.. saya juga belum pernah buat mbak..

  6. sendi says:

    maaf mas, bisa di perdetail lagi gak? mana view nya, mana controllernya, dan mana modelnya, thanx atas jawabannya

  7. agan coba baca di postingan saya sebelumnya yang juga tentang dependent dropdownlist.. disana bisa kelihatan untuk ngjalanin AJAX, siapa yang di view/ controller nya gan,,

  8. sendi says:

    yang menjadi permasalahan saya bukan dropdownlistnya, tapi misalnya saya ingin mengkloning textfield yan ada ajaxnya, seperti format angka, bagaimana carranya agar ajax yang tertempel di textfield tersebut ikut ke copy ke kloningnnya, sehingga kloningnya punya kemampuan ajax tersebut, thanx jawabannya

  9. itu sama aja gan. Kasus di atas saya pake ajax dengan dropdownlist, ketika dropdownlist di kloning, maka hasil kloningannya akan punya ajax itu juga.. begitu juga dengan textfield juga bisa begitu.. tinggal agan atur ajax nya tersebut aja..

  10. brightshield says:

    Mas, kalo pake filefield digabung sama jqrelcopy bisa ga ya? Kalo bisa gimana caranya? Soalnya saya coba ga ada hasilnya terus.

  11. harus nya sih bisa, tapi saya belum pernah coba juga..
    emang ga bisa nya gmana gan?

  12. oh iya, saya juga dulu pernah kendala disana.. kayak nya jangan pake cara getinstansce dia bisa nya mbak..

  13. brightshield says:

    Pake cara apa dong gan? hehe.. bingung saya, taunya pake itu aja yang ada tutornya

  14. agan pke upload yang bukan dari yii gan.. pake yang dari php biasa aja kyak nya bisa..

  15. sem says:

    mas jika buat tabular inputan biasa aja bukan Dependent Dropdownlist pake ajax seperti contoh diatas bagaimana caranya ya? jika menggunakan jappendo delete rownya selalu dari bawah, tidak bisa perbaris seperti contoh ajax yg diatas.

    Makasih.

  16. Pingback: [Yii Framework] Update Data Table/ Grid Form With JQrelCopy | Sabitlabscode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: