如何在 yii2 动态加载内容中加载小部件?
How to load widgets in dynamically loaded content in yii2 ?
每次点击事件时,我都会加载整个模态内容。由于我要在模态上显示的内容取决于 id,因此它是完全动态的。我在动态内容中使用了几个小部件。像 kartik select2 和其他几个。但它没有加载该小部件资产。然后我尝试手动加载资产,但它仍然遗漏了一些通常会加载的 js 文件。事件 ajax 表单提交也不起作用。下面是我查看的代码。
<?php
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use yii\helpers\ArrayHelper;
use admin\models\Applicant;
use yii\helpers\Html;
use kartik\widgets\Select2;
use yii\helpers\Url;
Modal::begin([
'header' => '<h1>Assign Applicant</h1>',
'options' => [
'id' => 'assignApplicantModal',
'tabindex' => false
],
]);
?>
<div class="job-positions-form">
<?php
$form = ActiveForm::begin([
'id' => 'assign_applicant_frm',
'action' => Url::to(['scheduler/assign_applicant/' . $id]),
'enableClientValidation' => true,
'enableAjaxValidation' => true,
'validationUrl' => Url::toRoute(['scheduler/validation-assign-applicant']),
'validateOnSubmit' => true,]);
?>
<div class="row">
<div class="col-sm-12">
<?php
$data = ArrayHelper::map(Applicant::find()->where('status = :status', [':status' => 'Active'])->all(), 'id', function($model) {
return $model->first_name . ' ' . $model->last_name;
});
echo $form->field($assign_model, 'applicant_id')->widget(Select2::classname(), [
'data' => $data,
'attribute' => 'applicant_id',
'options' => ['placeholder' => 'Select an applicant', 'multiple' => 'multiple', 'style' => "width:100%"],
'pluginEvents' => [
"select2:selecting" => "function() { "
. "no_position = $('body').data('no_position');"
. "if(no_position>= " . $model->no_of_persons . "){alert('You can select only " . $model->no_of_persons . " applicant(s)');return false;} }",
"select2:select" => "function() { "
. "no_position = $('body').data('no_position');"
. "$('body').data('no_position',++no_position);}",
"select2:unselect" => "function() { "
. "no_position = $('body').data('no_position');"
. "$('body').data('no_position',--no_position);}",
]
]);
?>
</div>
<div class="col-sm-12">
<?php echo $form->field($assign_model, 'applicant_pay')->textInput(['maxlength' => true]); ?>
</div>
<div class="form-group" style="text-align: center;">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'id' => 'assign_save_btn']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$inlineScript = "$('body').data('no_position'," . count($applicant_id) . ")";
$this->registerJs($inlineScript, \yii\web\View::POS_END, 'my-inline-js');
Modal::end();
这可能有几个原因。
最明显的(你的情况)是,如果你使用 renderPartial()
而不是 renderAjax()
,就会发生这种情况。他们都做同样的事情,但有一点不同:
renderPartial()
不加载资产 (css, js)。但是 renderAjax()
确实会加载资产。它专为通过 ajax 部分加载页面的用例而设计。
可能发生的第二点是当资产通过 Pjax 加载一些旧版本 bower\yii2-pjax
(<=2.0.5) 时。你可以在这个 上找到答案。对于 2.0.6+,您应该不会遇到问题。
每次点击事件时,我都会加载整个模态内容。由于我要在模态上显示的内容取决于 id,因此它是完全动态的。我在动态内容中使用了几个小部件。像 kartik select2 和其他几个。但它没有加载该小部件资产。然后我尝试手动加载资产,但它仍然遗漏了一些通常会加载的 js 文件。事件 ajax 表单提交也不起作用。下面是我查看的代码。
<?php
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use yii\helpers\ArrayHelper;
use admin\models\Applicant;
use yii\helpers\Html;
use kartik\widgets\Select2;
use yii\helpers\Url;
Modal::begin([
'header' => '<h1>Assign Applicant</h1>',
'options' => [
'id' => 'assignApplicantModal',
'tabindex' => false
],
]);
?>
<div class="job-positions-form">
<?php
$form = ActiveForm::begin([
'id' => 'assign_applicant_frm',
'action' => Url::to(['scheduler/assign_applicant/' . $id]),
'enableClientValidation' => true,
'enableAjaxValidation' => true,
'validationUrl' => Url::toRoute(['scheduler/validation-assign-applicant']),
'validateOnSubmit' => true,]);
?>
<div class="row">
<div class="col-sm-12">
<?php
$data = ArrayHelper::map(Applicant::find()->where('status = :status', [':status' => 'Active'])->all(), 'id', function($model) {
return $model->first_name . ' ' . $model->last_name;
});
echo $form->field($assign_model, 'applicant_id')->widget(Select2::classname(), [
'data' => $data,
'attribute' => 'applicant_id',
'options' => ['placeholder' => 'Select an applicant', 'multiple' => 'multiple', 'style' => "width:100%"],
'pluginEvents' => [
"select2:selecting" => "function() { "
. "no_position = $('body').data('no_position');"
. "if(no_position>= " . $model->no_of_persons . "){alert('You can select only " . $model->no_of_persons . " applicant(s)');return false;} }",
"select2:select" => "function() { "
. "no_position = $('body').data('no_position');"
. "$('body').data('no_position',++no_position);}",
"select2:unselect" => "function() { "
. "no_position = $('body').data('no_position');"
. "$('body').data('no_position',--no_position);}",
]
]);
?>
</div>
<div class="col-sm-12">
<?php echo $form->field($assign_model, 'applicant_pay')->textInput(['maxlength' => true]); ?>
</div>
<div class="form-group" style="text-align: center;">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'id' => 'assign_save_btn']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$inlineScript = "$('body').data('no_position'," . count($applicant_id) . ")";
$this->registerJs($inlineScript, \yii\web\View::POS_END, 'my-inline-js');
Modal::end();
这可能有几个原因。
最明显的(你的情况)是,如果你使用 renderPartial()
而不是 renderAjax()
,就会发生这种情况。他们都做同样的事情,但有一点不同:
renderPartial()
不加载资产 (css, js)。但是 renderAjax()
确实会加载资产。它专为通过 ajax 部分加载页面的用例而设计。
可能发生的第二点是当资产通过 Pjax 加载一些旧版本 bower\yii2-pjax
(<=2.0.5) 时。你可以在这个