How to display Dependent drop-down value using ajax call with dynamically

You are viewing revision #4 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 or see the changes made in this revision.

« previous (#3)next (#5) »

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(), 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.