[英]How to use widget kartik select2 with ajax & templates in yii2
[英]Kartik select2 widget not working in Ajax request in Yii2?
我在我的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框。
我也尝试更改display:none to display:block in select2 class。 在那种情况下,我得到了选择框,但是简单的html多选框不是select2小部件。
如何使用ajax调用从控制器获取它?
提前致谢。
将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 Web请求。
我也有类似的项目。 我有2个组合框(使用select2)。 从第一个组合框中选择一个区域时。 它将调用ajax请求获取省列表并填入第二个组合框。 这是我的解决方案:
使用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'); } ); });
演示: 演示链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.