Привязка DatePicker после успеха pjax приводит к бесконечной петле

Question

Так что у меня есть эта проблема, у меня есть ввод с классом date-time, я привязываю datepicker к нему, с:

$(".date-time").datepicker();

После фильтрации в представлении сетки kartik все работает нормально, так как предполагалось, что средство выбора даты не будет привязано (потому что pjax reload). Я пытаюсь связать это снова, с:

$(document).on("pjax:success", function() {
    $("#calendartasksearch-starttime").datepicker();
});

и я получаю бесконечную петлю ~~

Моя конфигурация вида сетки:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'pjax' => true,      
    'pjaxSettings' =>
        [
            'neverTimeout'=>true,
            'options'=>['id'=>'pjax-data'],
            'loadingCssClass' => false,
        ], 
    'bootstrap' => true,
    'condensed' => true,
    'responsive' => true,
    'showFooter' => true,
    'hover' => true,
    'showPageSummary' => true,
    'resizableColumns' => false,
    'columns' => $columns,
    ]);

Колонка с входным фильтром:

[
'label' => 'Task Start',
'headerOptions' => ['style' => 'text-align: center;'],
'attribute' => 'startTime',
'filter' => Html::activeInput('text', $searchModel, 'startTime', ['style' => 'text-align: center', 'class' => 'form-control date-time']),       
'value' => 'startTime',
'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;' ],
],

редактировать.

Хорошо, мне удалось выйти из бесконечного цикла с:

$(document).one("pjax:success", function() {
    $(".date-time").datepicker();
});

но все же я могу заново запустить плагин

Answer 1

Хорошо, я решил это сам.

Прежде всего, проблема в том, что вы не можете повторно инициализировать два.datepicker после обновления ajax, это просто идет в бесконечный цикл [даже если у вас есть отдельное имя + идентификатор + класс для каждого элемента].

Я решил эту проблему так:

Инициируйте один файл с виджетом, а второй с activeInpute, как показано ниже:

         [
            'label' => 'Task Start',
            'headerOptions' => ['style' => 'text-align: center;'],
            'attribute' => 'startTime',
            'filter' => DatePicker::widget(['model' => $searchModel, 'attribute' => 'startTime', 'dateFormat' => 'yyyy-MM-dd', 'options' => ['id' => 'date-time2','style' => 'text-align: center', 'class' => 'form-control']]),
            'value' => 'startTime',
            'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;', 'class' => 'datepicker' ],
        ],
        [
            'label' => 'Task End',
            'headerOptions' => ['style' => 'text-align: center;' ],
            'attribute' => 'endTime',
            'filter' => Html::activeInput('text', $searchModel, 'endTime', ['style' => 'text-align: center', 'id' => 'date-time', 'class' => 'form-control']),
            'value' => 'endTime',
            'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;' ],
        ],

В начале я выбираю дату в активном входе с:

$(document).ready(function(){
    $("#date-time").datepicker({
        dateFormat:"yy-mm-dd",
        orientation: "bottom auto"
    });
});

После обновления ajax я заново запускаю оба средства выбора даты с помощью:

$(document).on("pjax:success", function(){
    $("#date-time, #date-time2").datepicker({
        dateFormat:"yy-mm-dd",
        orientation: "bottom auto"
        });
});

Если кто-нибудь знает лучший способ сделать это, пожалуйста, уточните.