How To Update Dropdownlist With Ajax Request in yii framework?

Question

I have 2 dropDownList First dropDownList is Hour Second dropDownList is Minute dependent on Hour

example if Hour box selected 8 Minute box have 30 - 60 if Hour box selected 13 Minute Box have 00 - 60

I used ajax request but not work.

the code is show below

index.php

<?php
$this->breadcrumbs=array(
    'Book',
);
?>

<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'test',
    'type'=>'horizontal',
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
)); ?>

    <div class="row">

        <?php
        echo $form->dropDownList( $model, 'C_time',$this->HH(), array( 'empty' => 'Select Hour ',
                'ajax' => array(
                    'type'=>'POST',
                    'url'=>CController::createUrl('CustomersController/MM'),
                    'update'=>'#Minute',
                    'data'=>array('hour' => 'js:this.value'),
                ),
            )
        );
        echo CHtml::dropDownList('Minute','', array('empty'=>'Select Minute'));
        ?>
    </div>

<?php $this->endWidget(); ?>

CustomerController

public function actionIndex()    {
    $model = new Customers();        
    $this->render('index',array('model'=>$model));
}

public function HH()
{
    $r_model = new Restaurant();
    $par1 = 'HOUR';
    $par2 = 'R_open';
    $open = $r_model->getTime($par1,$par2);
    $par2 = 'R_close';
    $close = $r_model->getTime($par1,$par2);
    $rs = array();
    for ($i = $open; $i < $close; $i++){
        $rs[$i] = $i;
    }
    return $rs;
}

public function actionMM()
{
    if(isset($_POST['hour']) && $_POST['hour']!=''){
        $this->render('test');
        $hour=$_POST['hour'];
        $r_model = new Restaurant();
        $start = '00';
        $end = '60';
        if($hour == $r_model->getTime('HOUR','R_open')){
            $par1 = 'MINUTE';
            $par2 = 'R_open';
            $open = $r_model->getTime($par1,$par2);
            $start = $open;
        }
        elseif($hour == $r_model->getTime('HOUR','R_close')){
            $par1 = 'MINUTE';
            $par2 = 'R_close';
            $close = $r_model->getTime($par1,$par2);
            $end = $close;
        }
        $rs = array();
        for ($i = $start; $i < $end; $i++){
            $rs[$i] = $i;
        }
        echo CHtml::tag('option',array('value' => ''),
            CHtml::encode('Select User Type'),true);
        foreach($rs as $id)
        {
            echo CHtml::tag('option',
                array('value' => $id),CHtml::encode($id),true);
        }
    }
}

Answer 1

you don't need ajax for that!

first initial first dropdown with all options, then second dropdown(minutes) with empty options,

then depending on the first dropdown, fill the second, like:

<div class="row">
    <?php
    echo $form->dropDownList( 
             $model, 'C_time',$this->HH(), array( 'empty' => 'Select Hour ',
             'id' => 'drpHour', // give it an id so we can select it
        )
    );
    echo CHtml::dropDownList('Minute','', $data , array('empty'=>'Select Minute', 'id' => 'drpMinute'));
    ?>
</div>

<script>
 $(document).ready(function(){
       $('#drpHour').change(function(){ // depending on your logic, fill the second drop down
             if($('#drpHour').val() > 13){
                  $('#drpMinute').append('<option value="30" >30</option>');// and fill the rest
             ...
             }
             else{ ... }

       });

 });