Yii2 kartik depend dropdown doesnt load next drop down list - yii2

Question

I am using kartik DepDropdown widget. When I choose the region it must load all the cities from it in the particular dropdown (e.g. the one with id city_id).
In the chrome network tab I can see that the action returns the expected result json format of all the cities
{
"output": {
"40": "Велико Търново",
"41": "Горна Оряховица",
"42": "Елена",
"43": "Златарица",
"44": "Лясковец",
"45": "Павликени",
"46": "Полски Тръмбеш",
"47": "Свищов",
"48": "Стражица",
"49": "Сухиндол"
},
"selected": ""
}
But they doesn't load in the #city_id dropdown. My view looks like:
<div class="col-sm-6">
<?= $form->field($model, 'region_id')->dropDownList(Region::getAllRegions(), ['id' => 'region-dd', 'prompt'=> ' - ' . Yii::t('app', 'Region') . ' - ']); ?>
</div>
<div class="col-sm-6">
<?= $form->field($model, 'city_id')->widget(DepDrop::classname(), [
'options'=>[
'id'=>'city-id'
],
'pluginOptions'=>[
'allowClear' => true,
'depends' => ['region-dd'],
'url' => Url::to(['/system-information/load-cities'])
]
]); ?>
</div>
My controller:
public function actionLoadCities()
{
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($parents != null) {
$region_id = $parents[0];
$out = City::getAllCities($region_id);
echo Json::encode(['output'=>$out, 'selected'=>'']);
return;
}
}
echo Json::encode(['output'=>'', 'selected'=>'']);
}
Thank you in advance!

Answer 1

You have to provide the name=>value pairs of the id and the text to be assigned for a single option, if you look into the DOCS you will see that you have to return the array like below
[
'out'=>[
['id'=>'<city-id>', 'name'=>'<city-name>'],
['id'=>'<city-id>', 'name'=>'<city-name>']
],
'selected'=>'<city-id>'
]
which means that the id will be provided with the index id and the text for the dropdown will be provided with the index name, and looking at the response you have provided your method getAllCities is returning the array like below
[
'id'=>'name',
'id'=>'name',
]
you didn't add the method City::getAllCities($region_id); which is returning the $out array but on the very basic level as per documentation it should look like below,
Note: Change the table and column names respectively, I assume you have the id and name columns for the cities, if you have any other column name for the city name like city_name then you must create the alias name for the city_name field in the query.
public function getAllCities($region_id){
$query = new \yii\db\Query;
$query->select('id, name')
->from('{{%city}}')
->where(['=', 'region_id', $region_id])
->limit(20);
$command = $query->createCommand();
return $command->queryAll();
}
This will return an array like below.
Array
(
[0] => Array
(
[id] => 40
[name] => Велико Търново
)
[1] => Array
(
[id] => 41
[name] => Горна Оряховица
)
[2] => Array
(
[id] => 42
[name] => Елена
)
[3] => Array
(
[id] => 43
[name] => Златарица
)
)
which will be encoded as JSON like below
[
{
"id": "40",
"name": "Велико Търново"
},
{
"id": "41",
"name": "Горна Оряховица"
},
{
"id": "42",
"name": "Елена"
},
{
"id": "43",
"name": "Златарица"
}
]
and eventually when encode by the line
echo Json::encode(['output'=>$out, 'selected'=>'']);
it will return
{
"output": [
{
"id": "40",
"name": "Велико Търново"
},
{
"id": "41",
"name": "Горна Оряховица"
},
{
"id": "42",
"name": "Елена"
},
{
"id": "43",
"name": "Златарица"
}
],
"selected": ""
}
Hope this helps.