[Solved] How to create dependent DropDown Lists

After playing with Yii for few days, it is time to do some series business. The first requirement is to prepare dependent dorpdown lists. I have three table: tbl_productcategory, tbl_productsubcategory and tbl_productsubsubcategory:

tbl_productcategory : Two fields: id (PK) and category
tbl_productsubcategory: id, cat_id and subcategory.
tbl_productsubsubcategory: id, cat_id, subcat_id and description

While creating records for tbl_productsubsubcategory, I want to display available categories from tbl_productcategory in a DropDownlist (I am able to do this) and then on selecting a category, I want to display the corresponding "subcategory" from tbl_productsubcategory where tbl_productsubcategory.cat_id = selected id in the Category dropdown through Ajax (or something similar - jQuery?)

This is a common and simple requirement in most websites. I looked at post in Yii forum as well as cookbook. I found a cookbook item on the same subject and tried to implement it. Nothing happens when I select an item in the first dropdown list (cat_id). As per the cookbook example, it should call actionDynamicSubcategory() and that will fill the second dropdown list. Am I missing something? Or may be, I should use activeDropDownList (how?)

Here are my files.

View file.

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'productsubsubcategory-form',
	'enableAjaxValidation'=>true,
)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">
		<?php echo $form->labelEx($model,'cat_id'); ?>
		<?php
                  $productCategoriesArray = CHtml::listData(Productcategory::model()->findAll(),'id','category');
                   echo $form->DropDownList($model,'cat_id',$productCategoriesArray,
                            array(
                                'ajax' => array(
                                'type'=>'POST',
                                'url'=>CController::createUrl('Productsubsubcategory/dynamicSubcategory'),
                                'update'=>'#subcat_id')));

ay;
            ?>
              <?php echo $form->error($model,'cat_id'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'subcat_id'); ?>
		<?php

                       echo $form->dropDownList($model,'subcat_id',array());
            ?>

              <?php echo $form->error($model,'subcat_id'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'description'); ?>
		<?php echo $form->textField($model,'description',array('size'=>60,'maxlength'=>100)); ?>
		<?php echo $form->error($model,'description'); ?>
	</div>

	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>

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

</div>&lt!-- form -->

And this is my Controller file

<?php

class ProductsubsubcategoryController extends Controller
{
	/**
	 * @var string the default layout for the views. Defaults to '//layouts/column2', meaning
	 * using two-column layout. See 'protected/views/layouts/column2.php'.
	 */
	public $layout='//layouts/column2';

	/**
	 * @var CActiveRecord the currently loaded data model instance.
	 */
	private $_model;

	/**
	 * @return array action filters
	 */
	public function filters()
	{
		return array(
			'accessControl', // perform access control for CRUD operations
		);
	}

	public function accessRules()
	{
                // Is this Admin user?
		if  (!Yii::app()->user->isGuest  && Yii::app()->user->isAdminUser()  ) {
			$adminUserArray = array(Yii::app()->user->getName());
		} else {
			$adminUserArray = array('');
		}

                // Is this Super User?
		if  (!Yii::app()->user->isGuest  && Yii::app()->user->isSuperUser()  ) {
			$superUserArray = array(Yii::app()->user->getName());
		} else {
			$superUserArray = array('');
		}


		return array(
			array('allow',  // allow admin users to perform 'index' and 'view' actions
				'actions'=>array('index','view'),
				'users'=>$adminUserArray,
			),
			array('allow', // allow super users to perform 'create' and 'update' actions
				'actions'=>array('create','update','dynamicSubcategory'),
				'users'=>$superUserArray,
			),
			array('allow', // allow super user to perform 'admin' and 'delete' actions
				'actions'=>array('admin','delete'),
				'users'=>$superUserArray,
			),
			array('deny',  // deny all users
				'users'=>array('*'),
			),
		);
	}

        public function actionDynamicSubcategory() {
             $data=Productsubcategory::model()->findAll('parent_id=:parent_id',
             array(':parent_id'=>(int) $_POST['cat_id']));

             $data=CHtml::listData($data,'id','subcategory');
              foreach($data as $value=>$subcategory)
                {
                    echo CHtml::tag('option',
                               array('value'=>$value),CHtml::encode($subcategory),true);
                }

        }

	/**
	 * Displays a particular model.
	 */
	public function actionView()
	{
		$this->render('view',array(
			'model'=>$this->loadModel(),
		));
	}

	/**
	 * Creates a new model.
	 * If creation is successful, the browser will be redirected to the 'view' page.
	 */
	public function actionCreate()
	{
		$model=new Productsubsubcategory;

		// Uncomment the following line if AJAX validation is needed
		$this->performAjaxValidation($model);


		if(isset($_POST['Productsubsubcategory']))
		{
			$model->attributes=$_POST['Productsubsubcategory'];


			if($model->save())
				$this->redirect(array('view','id'=>$model->id));
		}


		$this->render('create',array(
			'model'=>$model,
		));
	}

	/**
	 * Updates a particular model.
	 * If update is successful, the browser will be redirected to the 'view' page.
	 */
	public function actionUpdate()
	{
		$model=$this->loadModel();

		// Uncomment the following line if AJAX validation is needed
		// $this->performAjaxValidation($model);

		if(isset($_POST['Productsubsubcategory']))
		{
			$model->attributes=$_POST['Productsubsubcategory'];
			if($model->save())
				$this->redirect(array('view','id'=>$model->id));
		}

		$this->render('update',array(
			'model'=>$model,
		));
	}

	/**
	 * Lists all models.
	 */
	public function actionIndex()
	{
		$dataProvider=new CActiveDataProvider('Productsubsubcategory');
		$this->render('index',array(
			'dataProvider'=>$dataProvider,
		));
	}

	/**
	 * Manages all models.
	 */
	public function actionAdmin()
	{
		$model=new Productsubsubcategory('search');
		$model->unsetAttributes();  // clear any default values
		if(isset($_GET['Productsubsubcategory']))
			$model->attributes=$_GET['Productsubsubcategory'];

		$this->render('admin',array(
			'model'=>$model,
		));
	}

	/**
	 * Returns the data model based on the primary key given in the GET variable.
	 * If the data model is not found, an HTTP exception will be raised.
	 */
	public function loadModel()
	{
		if($this->_model===null)
		{
			if(isset($_GET['id']))
				$this->_model=Productsubsubcategory::model()->findbyPk($_GET['id']);
			if($this->_model===null)
				throw new CHttpException(404,'The requested page does not exist.');
		}
		return $this->_model;
	}

	/**
	 * Performs the AJAX validation.
	 * @param CModel the model to be validated
	 */
	protected function performAjaxValidation($model)
	{
		if(isset($_POST['ajax']) && $_POST['ajax']==='productsubsubcategory-form')
		{
                      //$model->selected_catID = $model->cat_id;
			echo CActiveForm::validate($model);
			Yii::app()->end();
		}
	}
}