Почему у меня внутри модального окна не срабатывает js код?

Question

[Руслан Абсалямов]

Модальное окно рендериться с помощью renderAjax и заменяет контент . В итоге выходит что некоторые компоненты, которые были подключены с помощью js то не инициализируются и не могут, не пойму почему. Вот код

<?php
namespace frontend2\views;

use yii\web\AssetBundle;

class LKAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [

    ];
    public $js = [
        '/lk/static/js/script.js?v=1.1.2',
        '/lk/static/js/vendor.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        //'yii\bootstrap\BootstrapAsset',
    ];

    public $jsOptions = ['position' => \yii\web\View::POS_HEAD];
}

В шаблоне я подключил его LKAsset::register($this);
А когда я уже вызываю в модальном окне

<?= Html::input('money', 'RegistryArkBanks[contract_sum]', Html::encode($model->contract_sum), [
                'class' => 'input _fill'
            ]) ?>

<?= Html::input('datepicker', 'RegistryArkBanks[date_start_overdue]', !empty($model->date_start_overdue) ? date('Y-m-d', $model->date_start_overdue) : null, [
                'class' => 'input _fill'
            ]) ?>

То не получается его инициализировать, пишет Uncaught TypeError: $(...).datepicker is not a function
Хотя без модалки этой, все нормально инициализируется

Comments

[Дмитрий]

Доброе утро.
Модальное окно изначально скрыто, поэтому datepicker не инициализируется.
Вам надо после открытия модального окна заново инициализировать виджет.

[Руслан Абсалямов]

А если не секрет то примерно так?

<?php
/**
 * @var $this \yii\web\View
 * @var $model \common\models\RegistryArkBanks
 */

use yii\helpers\Html;
use yii\helpers\Url;
...

$this->registerJsFile('/lk/static/js/vendor.js');

$script = <<<JS
$('input[type="datepicker"]').datepicker();
$('input[type="money"]').mask('000 000 000 000', {reverse: true});
...
JS;
$this->registerJs($script);
?>

<?= Html::beginForm(Url::to(['credit/update', 'id' => $model->id]), 'post', [
    'id' => 'block-credit-create_form'
]) ?>
    <div class="content form">

        ...
        <div class="field">
            <label>Сумма долга<span class="required-symbol">*</span></label>
            <?= Html::input('money', 'RegistryArkBanks[contract_sum]', Html::encode($model->contract_sum), [
                'class' => 'input _fill'
            ]) ?>
            <div class="__error"><?= $model->getFirstError('contract_sum') ?></div>
        </div>
        <div class="field">
            <label>Сумма, взятая в кредитной организации</label>
            <?= Html::input('money', 'RegistryArkBanks[contract_initial_sum]', Html::encode($model->contract_initial_sum), [
                'class' => 'input _fill'
            ]) ?>
            <div class="__error"><?= $model->getFirstError('contract_initial_sum') ?></div>
        </div>
        <div class="field">
            <label>Номер банковской карты</label>
            <?= Html::input('text', 'RegistryArkBanks[contract_card_number]', Html::encode($model->contract_card_number), [
                'class' => 'input _fill'
            ]) ?>
            <div class="__error"><?= $model->getFirstError('contract_card_number') ?></div>
        </div>
        <div class="field">
            <label>Дата заключения<span class="required-symbol">*</span></label>
            <?= Html::input('datepicker', 'RegistryArkBanks[contract_date]', !empty($model->contract_date) ? date('Y-m-d', $model->contract_date) : null, [
                'class' => 'input _fill'
            ]) ?>
            <div class="__error"><?= $model->getFirstError('contract_date') ?></div>
        </div>
        <div class="field">
            <label>Дата начала просрочки</label>
            <?= Html::input('datepicker', 'RegistryArkBanks[date_start_overdue]', !empty($model->date_start_overdue) ? date('Y-m-d', $model->date_start_overdue) : null, [
                'class' => 'input _fill'
            ]) ?>
            <div class="__error"><?= $model->getFirstError('date_start_overdue') ?></div>
        </div>

    </div>
    <div class="footer">
        <button type="submit" href="#" class="btn _fill">Редактировать</button>
    </div>
<?php Html::endForm() ?>

Просто если так то у меня ошибка Uncaught TypeError: $(...).datepicker is not a function
at :1:31

[Дмитрий]

Руслан Абсалямов, для начала попробуйте сделать так:
$this->registerJs($script, View::POS_END);
Это перенесёт Ваш js вниз страницы

[Дмитрий]

Руслан Абсалямов, получается, что сейчас Вы пытаетесь инициализировать datepicker, но сам js, который создаёт сам виджет находится ниже, чем Ваш код.
Как-то так:

<script>/* Ваш код */</script>
/* код datepicker */
<script src="js/datepicker.js></script>"

Надо, чтобы было так:

/* код datepicker */
<script src="js/datepicker.js></script>"
<script>/* Ваш код */</script>