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

Question

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

Я использую виджет 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, у меня появляется свойство display: none, поэтому я не могу показать свой блок select2.

Я также попытался изменить отображение: нет для отображения: блок в классе select2. В этом случае я получил окно выбора, но это просто окно множественного выбора HTML, а не виджет select2.

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

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

3

php yii2 yii2-basic-app yii2-widget

Решение

Другие решения

У меня также есть подобный проект, как этот.
У меня есть 2 комбобокса (используя select2). Когда выберите район из первого списка. Он вызовет запрос ajax, чтобы получить список провинций и заполнить второй комбинированный список.
Вот мое решение:

Использование виджета Select2 как обычно в форме

Использование javascript для вызова ajax-запроса и изменения данных второго выпадающего списка.
Данные ответа моего контроллера в формате json.

$('#district-selector').on('change', function() {
var districtId = $(this).val();
var url = $(this).attr('tb_href');
$('#province-selector').html('');
$.get(
url,
{
city_id: districtId
},
function(response) {
if (response.error == 0 && response.data.length) {
$('#province-selector').append(new Option('', ''));
$.each(response.data, function() {
console.log(this.id + '--' + this.title);
var newOption = new Option(this.title, this.id);
$('#province-selector').append(newOption);
});
}
$('#province-selector').trigger('change');
}
);
});

Демо-версия: демонстрационная ссылка

0

Источник

Accepted Answer

Плохо практиковать рендеринг 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.

0