Question

所以我有这个问题我输入了类日期时间，我是绑定datepicker到它，用：

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

在kartik网格视图中过滤后，一切正常，因为它假设日期选择器变得无法绑定（因为pjax重新加载）。我试图再次绑定它：

$(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

好的，我自己解决了。

首先，问题是你不能在ajax刷新后重新启动两个.datepicker，它只是进入无限循环[即使你有每个元素的分隔名+ id +类]。

我解决问题的方法是：

使用widget启动一个文件，使用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刷新后，我重新启动两个datepickers：

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

如果anoyone知道更好的方法，请详细说明。

pjax成功后绑定datepicker导致infiniteloop

1 个答案: