The subcat is just loading after the right json response.

[fhqrnr]

My controller:

public function actionSubcat() {
    $out = [];
    Yii::info(var_export($_POST));
    if (isset($_POST['depdrop_parents'])) {
        $parents = $_POST['depdrop_parents'];
        if ($parents != null) {
            $cat_id = $parents[0];

            $out = [
                ['id' => 244, 'name' => 'Cape Town'],
                ['id' => 245, 'name' => 'Pretoria'],
                    // and so on
            ];
            echo Json::encode(['output' => $out, 'selected' => '']);
            return;
        }
    }
    echo Json::encode(['output' => '', 'selected' => '']);
}

The Json response:

I think my format is right, but it is not work like below:

[kartik-v]

How are you creating your dependent dropdown widget markup (are you setting the depends property correctly)?

[kartik-v]

Note: if you have upgraded to latest yii2 version, there is a major change in CSRF validation and AJAX/POST requests will fail with a 400 bad gateway error.

You need to add <?= Html::csrfMetaTags() ?> to your view layout file. Refer a similar issue.

This is a core framework change. Refer this commit and the related issue.

[fhqrnr]

Thank for your reply.

1: My dependent dropdown widget markup is OK, because the Ajax post for subcats can be triggered by the parent category click event.

2: I have upgraded to latest YII2 version. but i don't think the CSRF validation is the problem, as the screenshot for Json response which i attached shows, I got the response from the server.

so it may be a Js problem, we got a right response with the right JSON format, but it shows loading.

[kartik-v]

Cannot replicate this in any of my tests.

Can you check or post your markup of the the DepDrop widgets?

[fhqrnr]

Below is my _form.php

                        <?php
                        echo Select2::widget([
                            'id' => 'parentid',
                            'name' => 'firstCat',
                            'options' => ['placeholder' => 'select'],
                            'data' => ArrayHelper::map(Category::find()->where('parent_category_id IS NULL')->asArray()->all(), 'id', 'category_name')
                        ]);
                        ?>

            <?php
            echo $form->field($model, 'category_id')->widget(DepDrop::classname(), [
                'options' => ['id' => 'subcat-id'],
                'type' => DepDrop::TYPE_SELECT2,
                'pluginOptions' => [
                    'depends' => ['parentid'],
                    'placeholder' => 'Select...',
                    'select2Options'=>['pluginOptions'=>['allowClear'=>true]],
                    'url' => Url::to(['subcat'])
                ]
            ]);
            ?>

thanks a lot.

[kartik-v]

The parentid markup you have does not seem to be correct. You need to set it up this way (notice the id property inside options):

echo Select2::widget([
    'name' => 'firstCat',
    'options' => ['id' => 'parentid', 'placeholder' => 'select'],
    'data' => ArrayHelper::map(Category::find()->where('parent_category_id IS NULL')->asArray()->all(), 'id', 'category_name')
]);

In addition, your markup for the child subcat-id is also incorrect and needs to be changed to this for Select2 (refer docs/demos):

 echo $form->field($model, 'category_id')->widget(DepDrop::classname(), [
    'options' => ['id' => 'subcat-id', 'placeholder' => 'Select...'],
    'type' => DepDrop::TYPE_SELECT2,
    'select2Options'=>['pluginOptions'=>['allowClear'=>true]],
    'pluginOptions' => [
        'depends' => ['parentid'],
        'url' => Url::to(['subcat'])
    ]
]);

[fhqrnr]

Thanks for your patience. But it is still not working. It must be the Js problem. May be i missed some Js file or imported unnecessary Js files.

I will figure it out and then reply you here.

Anyway thank you again.