You are viewing revision #3 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.
Hi Friends, In this tutorial I write a code display dependent drop-down value using ajax call.
Suppose We have to two table like county and state,so if display the state using county wise call a ajax on county drop-down value and fetch the state using county code.
1) First we have to create the two table and insert the some sample data
CREATE TABLE `country_master` (
`id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`country` VARCHAR(64) NOT NULL DEFAULT '' COMMENT 'Country name' COLLATE 'latin1_swedish_ci',
`country_code` CHAR(2) NOT NULL DEFAULT '' COMMENT 'Country code' COLLATE 'latin1_swedish_ci',
`country_code_iso3` CHAR(3) NOT NULL DEFAULT '' COMMENT 'Country code 3 character' COLLATE 'latin1_swedish_ci',
`language` CHAR(3) NOT NULL COMMENT 'Language' COLLATE 'latin1_swedish_ci',
`currency_name` VARCHAR(50) NULL DEFAULT NULL COMMENT 'Currency name' COLLATE 'latin1_swedish_ci',
`currency_symbol` CHAR(3) NULL DEFAULT NULL COMMENT 'Currency symbol' COLLATE 'latin1_swedish_ci',
`currency_rate` DECIMAL(3,3) NULL DEFAULT NULL COMMENT 'Currency rate',
`is_publish` TINYINT(1) NOT NULL DEFAULT '1' COMMENT 'Is publish',
PRIMARY KEY (`id`),
INDEX `IDX_COUNTRIES_NAME` (`country`)
)
COLLATE='utf8_general_ci'
ENGINE=MyISAM
ROW_FORMAT=DYNAMIC
AUTO_INCREMENT=1;
INSERT INTO `country_master` (`id`, `country`, `country_code`, `country_code_iso3`, `language`, `currency_name`, `currency_symbol`, `currency_rate`, `is_publish`) VALUES (1, 'Afghanistan', 'AF', 'AFG', '', '', NULL, NULL, 1);
CREATE TABLE `state_master` (
`id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`country_id` INT(11) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'Country name',
`country_code` VARCHAR(10) NOT NULL DEFAULT '' COMMENT 'Country code' COLLATE 'latin1_swedish_ci',
`state_code` VARCHAR(32) NOT NULL DEFAULT '' COMMENT 'State code' COLLATE 'latin1_swedish_ci',
`state` VARCHAR(32) NOT NULL DEFAULT '' COMMENT 'State' COLLATE 'latin1_swedish_ci',
`is_publish` TINYINT(1) NOT NULL DEFAULT '1' COMMENT 'Is publish',
PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
ENGINE=MyISAM
ROW_FORMAT=DYNAMIC
AUTO_INCREMENT=1;
INSERT INTO `state_master` (`id`, `country_id`, `country_code`, `state_code`, `state`, `is_publish`) VALUES (1, 1, 'AF', 'BDS', 'Badakhshan', 1);
2) put the below code in your _from.php file.
make sure pass the state value in hidden field
<?php echo CHtml::hiddenField('hidden_state',$model->state);?>
<div class="control-group">
<?php echo $form->label($model,'country',array('class'=>'control-label')); ?>
<div class="controls">
<?php echo $form->dropDownlist($model,'country',UtilityHtml::getCountryData($model->country), array('class'=>'m-wrap large tooltips','data-original-title'=>'Country'),
'ajax' => array(
'type'=>'POST',
'url'=>CController::createUrl('dynamicStates'),
'update'=>'#VkUsers_state',
'data'=>'js:$(this).serialize()+"&hidden_state='.$model->state.'"',
))); ?>
<?php echo $form->error($model,'country',array('class'=>'error_position')); ?>
</div>
</div>
<div class="control-group">
<?php echo $form->label($model,'state',array('class'=>'control-label')); ?>
<div class="controls">
<?php echo CHtml::dropDownList('VkUsers[state]','', array(),array('prompt'=>'Select','id'=>'VkUsers_state'),array('class'=>'m-wrap large tooltips','data-original-title'=>'State'))); ?>
<?php echo $form->error($model,'state',array('class'=>'error_position')); ?>
</div>
</div>
3) write code in controller file
public function actionDynamicStates()
{
$data=UtilityHtml::getStateData(isset($_POST['VkUsers']['country']));
$state = isset($_POST['hidden_state']);
foreach($data as $value=>$name) {
$opt = array();
$opt['value'] = $value;
if($state == $value) $opt['selected'] = "selected";
echo CHtml::tag('option', $opt , CHtml::encode($name),true);
}
die;
}
4) create the UtilityHtml in components folder and put the below function
class UtilityHtml extends CHtml{
public static function getCountryData($sel='')
{
$data = CountryMaster::model()->findAll();
$dataOptions = array(''=>'Select Country');
foreach ($data as $country) {
$dataOptions[$country->country_code] = $country->country;
}
return $dataOptions;
}
public static function getStateData($country='')
{
$stateData = StateMaster::model()->findAll("country_code = '$country'");
$dataOptions = array(''=>'Select State');
foreach ($stateData as $state) {
$dataOptions[$state->state_code] = $state->state;
}
return $dataOptions;
}
}
5) When you can update the page selected county and state value using a trigger in _form.php file
<?php
Yii::app()->clientScript->registerScript('countryload','jQuery(function($) {
$("#VkUsers_country").trigger("change");
$("#VkUsers_state").val(\''.$model->state.'\');
});
');
?>
I hope it's may be some helpful.
Code not working
I tried your code above and followed your steps meticulously but it seems there is something wrong.
Have you tested your code?
code
Yes I always use the code and it's working fine, please provide the error so I can understand.
I tried this dependent dropdown code, I am new to YII i am seeing the request going to site/index all the time
When ever I change the option in the first dropdown, It is doing ajax validation not calling the function or controller method i defined. If I keep enableAjaxvalidation false, it is not loading any javascript files.
View code
<?php $form=$this->beginWidget('CActiveForm', array( 'id'=>'connecttbl-connect-form', // Please note: When you enable ajax validation, make sure the corresponding // controller action is handling ajax validation correctly. // See class documentation of CActiveForm for details on this, // you need to use the performAjaxValidation()-method described there. 'enableAjaxValidation'=>true, 'clientOptions' => array( 'validateOnSubmit'=>true, ), )); ?>
<div class="row"> <?php echo $form->labelEx($model,'category'); ?> <?php echo $form->dropDownList($model,'category', CHtml::listData(Connecttbl::model()->findAll(array('order' => 'category ASC')), 'categoryid', 'category'), array('empty'=>'Select Category', 'multiple'=>true), array( 'ajax' => array( 'type' => 'POST', 'url' => CController::createUrl('/Connect/getSubcategories'), 'data' => array('category', 'js:this.value'), 'update' => '#'.CHtml::activeId($model, 'subcategory'), ))); ?> <?php echo $form->error($model, 'category'); ?> </div> <div class="row"> <?php echo $form->labelEx($model,'subcategory'); ?> <?php echo CHtml::dropDownList('subcategory','', array('multiple'=>true), array( 'ajax' => array( 'type' => 'POST', 'url' => CHtml::createUrl('/Connect/getSubcategories'), 'data' => array('subcategory', 'js:this.value'), 'update' => '#'.CHtml::activeId($model, 'crop'), ) )); ?> <?php echo $form->error($model,'subcategory'); ?> </div>
I defined the below code in controller,
public function actionIndex() { $model = new Connecttbl(); if(isset($_POST['ajax'])) { if ($_POST['ajax']=='connecttbl-connect-form') { echo $_POST['Connecttbl[category]']; } Yii::app()->end(); } if(Yii::app()->user->isGuest) $this->redirect('site/index'); else { $this->render('../site/connect', array('model' => $model)); } } public function actiongetSubcategories() { $data = Connecttbl::model()->findAll('categoryid=:categoryid', array(':parentid'=>(int)$_POST['Connecttbl[category]'])); $data = CHtml::listData($data, 'subcategoryid', 'subcategory'); foreach($data AS $value=>$name) { echo CHtml::tag('option', array('value'=>$value), CHtml::encode($name),true); } }
Reply
Hi Anjith,
=>Please remove the 'multiple'=>true on category drop-down memu
=>pass the subcategory value hidden filed
<?php echo CHtml::hiddenField('hidden_subcategory',$model->subcategory);?>
=> write the js code on _form.php file like
<?php Yii::app()->clientScript->registerScript('countryload','jQuery(function($) { $("#yourcategoryid").trigger("change"); $("#yoursubcategoryid").val(\''.$model->subcategory.'\'); }); '); ?>
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.