php - Kartik select2 小部件在 Yii2 的 Ajax 请求中不起作用？

Question

我在我的 yii2 基本应用程序中使用 kartik select2 小部件。现在我必须在 ajax 调用的 select2 小部件中显示省名。如果我直接将它放在表格中，它工作正常。但是不能使用 ajax 调用。

这是我的表单域:

<?= $form->field($model, 'role')->dropDownList(
    ArrayHelper::map(SubAdminRoles::find()->all(), 'id', 'role_name'),
    [
        'prompt' => 'Select Role',
        'onchange' => '
            if($(this).val() != 3) {
                $( "#user_area" ).html("showLoading");
                $.post( "fetch-area-list?id='.'"+$(this).val(), 
                function(data) {
                    $( "#user_area" ).html(data);
                })
            }'
    ]
    ) ?>

 <div id="user_area">

</div>

这是我的操作代码

public function actionFetchAreaList($id) {
   // $this->layout = 'none';
    $data = [];
    if($id == 1) {
        $provinceList = \app\modules\adminpanel\models\ProvinceMaster::findAll(['status' => 1, 'is_deleted' => 0]);

        foreach($provinceList as $obj) {
            $data[$obj['id']] = $obj['province_name'];
        }
        //print_r($data);
        //exit;
    } else if($id == 2) {
        $subDistrictList = \app\modules\adminpanel\models\SubDistrictMaster::findAll(['status' => 1, 'is_deleted' => 0]);

        foreach($subDistrictList as $obj) {
            $data[$obj['id']] = $obj['sub_district_name'];
        }
    }

    echo '<label class="control-label">Select Province</label>';
    echo Select2::widget([
        'name' => 'state_2',
        'value' => '1',
        'data' => $data,
        'options' => ['multiple' => true, 'placeholder' => 'Select Province']
    ]);
    exit;
}

现在，当我尝试通过 ajax 获取它时，我带有 display:none 属性，因此我无法显示我的 select2 框。

我还尝试在 select2 类中将 display:none 更改为 display:block。在那种情况下，我得到了选择框，但它是简单的 html 多选框而不是 select2 小部件。

如何使用 ajax 调用从 Controller 获取它？

提前致谢。

Answer 1

在 action 中呈现 html 是不好的做法。在您的情况下，小部件需要相关的 JS 进行初始化。但它不会包含在您的回复中。移动所有 html 以查看 area-list 并使用以下代码呈现:

public function actionFetchAreaList($id) {
    $this->layout = false;

    // ... preparing data

    return $this->renderAjax('area-list', [
        // ... some view data
    ]);
}

方法renderAjax呈现命名 View 并注入(inject)所有已注册的 JS/CSS 脚本和文件。它通常用于响应 AJAX Web 请求。