Ish Ish - 2 months ago 41
Ajax Question

How to load widgets in dynamically loaded content in yii2 ?

I am loading the entire modal content everytime on some click event. As my content to be displayed on the modal depends on the id so it is completely dynamic. I am using several widget in the dynamic content. like kartik select2, and several other. But it is not loading that widget assets. Then I tried to manually load the assets but still it miss some js file which would normally load. Event ajax form submission is also not working. Below is the code of my view.

<?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();

Answer

There can be a few reasons for this.

The most obvious one (which is your case) is that this happens if you use renderPartial() instead of renderAjax(). They both do the same thing with one difference :

renderPartial() does not load assets (css, js). However renderAjax() does load the assets. It was designed for the use cases where pages were loaded partially via ajax.

The second point that can happen is when assets are loaded via Pjax with some older versions of bower\yii2-pjax (<=2.0.5). You can find an answer on this here. For 2.0.6+ you shouldn't experience issues.

Comments