Search code examples
yiiyii-components

Dependent dropdownlist with chosen jquery plugin. Dynamic update


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",

        ));

Solution

  • 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.