Dependent dropdownlist with chosen jquery plugin. Dynamic update

Question

I'm new to yii so dont be strict. I have dependent dropdown list with countries/states from model. It works perfect until comes Chosen jquery plugin. I use http://harvesthq.github.com/chosen/. So the problem is in howto trigger liszt:updated, so 2nd select can obtain data from standart select. This is view code which makes that lists.

if ($field->varname=='country') {
        echo $form->dropDownList($profile, $field->varname,CHtml::listData(Countries::model()->findAll(),'short','title'), array(
        'class'=>"chzn-select",
        'empty'=>"Select country",  
        'ajax' => array(
                        'type' => 'POST',
                        'url'=>$this->createUrl('registration/state'),   
                        'update' => '#Profile_state',                        
                        'data'=>array('country'=>'js:this.value',),     

        )));

        }

        elseif($field->varname=='state') {
        echo $form->dropDownList($profile, $field->varname,array(), array(
        'empty'=>"Select state",
        'class'=>"chzn-select",

        ));

The most obvious solution to add success call to ajax `'success'=>'function(){$("#Profile_state").trigger("liszt:updated");}'`. But this dont work. — ineersa, Mar 28 '13 at 13:29

score 3 · Accepted Answer · answered Apr 12 '13 at 06:51

Ok. I found the solution. Writing it here(maybe someone will find it usefull). In our view file

echo $form->dropDownList($profile, $field->varname,CHtml::listData(Countries::model()->findAll(),'short','title'), array(
        'class'=>"chzn-select",
        'empty'=>"Select country",  
        'ajax' => array(
                        'type' => 'POST',
                        'url'=>$this->createUrl('registration/state'),   
                        'update' => '#Profile_state',                        
                        'data'=>array('country'=>'js:this.value',), 
                        'success'=> 'function(data) {
                                        $("#Profile_state").empty();
                                        $("#Profile_state").append(data);
                                        $("#Profile_state").trigger("liszt:updated");

                                                } ',

        )));

Then in 2nd dropdownlist leve data empty:

echo $form->dropDownlist($profile, $field->varname, array(),array(
    'class'=>"chzn-select",
    'empty'=>"Select state",
    ));

Works perfect for me but gave me hours of research work.

Dependent dropdownlist with chosen jquery plugin. Dynamic update

1 Answers1