Виджет Kartik select2 не работает в запросе Ajax в Yii2?

Question

Я использую виджет kartik select2 в своем основном приложении yii2. теперь я должен отображать названия провинций в викторине select2 при вызове ajax. Он работает нормально, если я ставлю его непосредственно в форме. однако не работает с вызовом 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 я поставляется с дисплеем: нет собственности, так что я не являюсь способный показать мой блок select2.

Я также попробовал сменить дисплей: none для отображения: block in select2 class. В этом случае я получил поле выбора, но просто html несколько select box не select2 widget.

Как получить его от контроллера, используя вызов ajax?

Заранее спасибо.

Answer 1

Плохая практика визуализации html внутри действия. В вашем случае для виджета требуется связанная JS для инициализации. Но это не будет включать в ваш ответ. Переместить все ваши HTML для просмотра area-list и визуализации, используя следующий код:

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

    // ... preparing data 

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

Метод renderAjax оказывает именованный вид и впрыскивает все зарегистрированные JS/CSS скрипты и файлы. Он обычно используется в ответ на веб-запросы AJAX.