yii2 - Pjax在Yii2中不断刷新整个页面，Pjax在listview中被多次调用

Question

这几天我一直在努力解决这个问题，基本上我是在尝试让评论和 child 评论，评论有一个名为“retrievecomment”的按钮/链接来检索子评论。

我发现 pjax 不工作，它一直刷新整个页面。

    <div class="row">   
            <?= $model['comment']?>
    </div>
    <div class="row">
        <div id="selector"align="right">
            <?= Html::a('Retrieve Comment', ["../../thread/index?id=" . $model['thread_id'] . "&comment_id=" . $comment_id], 
                                        ['data-pjax' => '#childCommentData-'.$comment_id, 'class' => 'btn btn-default'
                                        ,'id' => 'retrieveComment' . $comment_id]) ?>
        </div>

        <?php Pjax::begin([
            'id' => 'childCommentData-'.$comment_id,
            'clientOptions'=>[
                    'timeout' => 5000,
                    'registerClientScript' => "$.pjax.reload({container:'#childCommentData-$comment_id'});",
                    'linkSelector'=>'#retrieveComment'.$comment_id
                    ]
            ]);?>

            <div  class="col-md-12">

                <?php if(isset($retrieveChildData)){ ?>
                    <?= ListView::widget([

                            'dataProvider' => $retrieveChildData,
                            'options' => [
                                'tag' => 'div',
                                'class' => 'list-wrapper',
                                    'id' => 'list-wrapper',
                            ],
                                'layout' => "\n{items}\n{pager}",

                            'itemView' => function ($model, $key, $index, $widget) {
                                return $this->render('_list_child_comment',['model' => $model]);
                            }, 
                            'pager' => [
                                'firstPageLabel' => 'first',
                                'lastPageLabel' => 'last',
                                'nextPageLabel' => 'next',
                                'prevPageLabel' => 'previous',
                                'maxButtonCount' => 3,
                            ],
                        ]) ?>

                <?php } ?>


            </div>
        <?php Pjax::end();?>
    </div>

</div>

注释的 Pjax 在 listview 中被多次调用，我相信这已经成为问题，因为编译器混淆了要重新加载的 pjax，

Controller 代码(在 actionIndex 内)

            else if(!empty($_GET['comment_id'])){
                $comment_id = $_GET['comment_id'];

                //retrieve yes data
                $retrieveChildData = new SqlDataProvider([
                    'sql' => Comment::retrieveChildComment($comment_id),  
                    'totalCount' => Comment::countChildComment($comment_id),
                    'pagination' => [
                        'pageSize' =>5,
                        ],

                ]);
                return $this->render('_list_comment.php', ['retrieveChildData' => $retrieveChildData]);

            }

Answer 1

最常见的问题来源

通常pjax的整页刷新有两种可能的来源:

1. 您的 pjax 请求超过了 pjax 设置中设置的超时时间。这会导致整个页面刷新
2. 您在第一个 pjax 请求完成之前触发另一个 pjax 请求，这也会导致整个页面刷新，因为 pjax 不支持多个并行刷新

如何解决 #1

这个很简单，看起来您已经自己弄明白了。您只需增加 pjax-timeout 值。您可以在每个小部件实例上单独执行此操作，也可以像这样全局设置它:

if ($.pjax) {
    $.pjax.defaults.timeout = 5000;
}

上面的代码将所有 pjax 实例的默认超时设置为 5000 毫秒。通常绰绰有余。通常的默认值 650 毫秒对于复杂的 Web 应用程序来说是相当紧的。

您可以在官方网站上找到所有选项:here

如何解决#2

这有点棘手，看起来这是你的问题。要找出答案，请查看您的调试工具栏并确保跨页面保留日志(在 chrome 中，此设置名称是网络选项卡下的 preserve log。如果您看到多个请求触发，这就是您的问题!

如果是这样，您必须首先实现自己的检查，以确保在仍有一些运行时不会触发额外的 pjax 请求。如果您不这样做，并且用户快速依次单击两个按钮，那么无论如何您都会遇到这种情况。

我通常通过实现一个运行了多少 ajax 请求的计数器来防止这种情况发生。如果计数器为 0，我会触发新请求，否则我会等待。

ajax 计数器示例:

//this is the actual counter
var ajaxCounter = 0;

//this method is called whenever an ajax-request fires
$(document).ajaxSend(function() {
    ajaxCounter++;
});

//this method is called whenever an ajax-request finishes...no matter of its result
$(document).ajaxComplete(function() {
    ajaxCounter--;
});

//check if pjax calls are allowed right now
var pjaxAllowed = function () {
    return ajaxCounter == 0;
}

瞧瞧!在触发 pjax 之前，您只需检查 ajaxCounter == 0 或使用便利函数 pjaxAllowed() ，如上所示。如果你不想每次都检查这个，你可以实现你自己的小 pjax-request-stack。使用 pjax 提供的事件很容易做到这一点:Pjax-Events

希望能帮到你。这也让我有些头疼；)!如果您需要更多信息，请告诉我...

常用pjax调试

• 调试工具栏是你的 friend 。确保选中 Chrome 开发工具的网络选项卡中的 preserve logs。否则，当页面重新加载时，您将无法跟踪请求
• 如果您看到一个请求被中止，那么这通常表示问题来自上面的@2
• 如果您看到请求返回 HTTP 代码 200 以外的内容，请检查 Chrome 开发工具中的响应预览。通常这会告诉您发生了异常。在这种情况下，您的问题出在服务器端。仔细检查您的 PHP 代码并修复它!
• pjax 容器中的链接被特殊处理。如果您希望它们触发周围 pjax-conatiner 的刷新，请保持原样...否则将属性 data-pjax="0" 添加到它们。这表示如果单击此链接则不需要刷新。
• 阅读文档...它花了 5 分钟:https://github.com/defunkt/jquery-pjax