如何在yii2中加载动态加载内容中的小部件？

Question

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 1

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.