[Yii Framework] Membuat Tampilan Dinamis dengan AJAX

Pada suatu kasus kita perlu membuat tampilan dinamis yang dapat berubah-ubah jika kita inginkan. Misal suatu kasus kita memiliki dropdownlist yang isinya “laki-laki” dan “perempuan”. Jika kita user memilih “laki-laki” maka akan tampil tulisan “Halo cowok cakep”, dan jika milih “perempuan” akan tampil tulisan “halo cewek cantik”ūüėÄ. Okeh, pertama-tama yang perlu kita buat adalah dropdownlist untuk memilih jenis kelamin dan kita sisipkan AJAX request pada dropdownlist tersebut :

        
$jekel=array(
    array('id'=>1,'jj'=>'Laki-laki'),
    array('id'=>2,'jj'=>'Perempuan'),
);

echo 'Jenis Kelamin :  ';
echo CHtml::dropDownList('jkel',array(),
        CHtml::listData($jekel,'id', 'jj'),
        array('empty'=>'Pilih Jenis Kelamin','style'=>'width:165px','ajax' => array(
           'type'=>'POST',
           'dataType'=>'json',
           'url'=>CController::createUrl('/cat/nama'),
           'data' => "js:{haha:$(this).val()}",
           'success'=>'function(data){
              $("#dinam").html(data.isi);
       }',)
       )
).'<br/>';

Pada code di atas, dropdownlist akan merequest sebuah action pada “cat” controller dan pada action “nama”. Maka dari itu kita harus membuat action tersebut :

    public function actionNama()
    {
        $isi='';
        if($_POST['haha']==1)
        {
            $isi.='Hai Cowok Cakep';
        }
        else {
            $isi.='Hai Cewek Cantik';
        }

        echo CJSON::encode(array
         (
             'isi'=>$isi,
        ));
          Yii::app()->end();
    }

Dari code di atas kita melakukan set tampilan dimana jika yang dipilih pada dropdownlist adalah option dengan “id”=1 atau laki-laki, maka akan tertulis tulisan “Hai Cowok Cakep”, dan klo yang dipilih “id”=2 atau perempuan, maka akan keluar tulisan “Hai Cewek Cantik”.

Terus yang akan di set nilainya tampilan yang mana??

Nah, itu juga sudah di atur pada dropdownlist kita tadi. Anda akan melihat kode berikut :

$("#dinam").html(data.isi);

Maksud dari kode tersebut adalah bahwa kontrol yang memiliki “id”=”dinam” lah yang akan di set tulisannya secara dinamis.

Langkah terkhir adalah kita harus mendefinisikan kontrol dengan id “dinam”¬† tersebut pada view kita tempat anda mendefinisikan dropdownlist tadi :

<div id="dinam">
</div>

Sip, selesai..
Silahkan mencoba..

Semoga membantu…ūüėÄ

4 Responses to [Yii Framework] Membuat Tampilan Dinamis dengan AJAX

  1. mrkoeh says:

    gan,
    kalau nampilin cgridview gmna gan??
    jdi pas kita select id=1 tampil cgridview. .

    terimakasih. .

  2. itu ga bisa langsung gan manggil nya.. coba searching di blog ini saya pernah buat postingan kalo ga salah kata kunci nya “select data from dialog”

  3. mas..
    mau tanya..
    untuk sintaks ini
    ‘data’ => “js:{haha:$(this).val()}”,

    itu “haha” darimana ya ?

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: