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

You are viewing revision #5 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#4)

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.