Pjax在Yii2中保持刷新整个页面,在listview中多次调用Pjax

最常见的问题 - 来源

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

您的pjax请求超过了pjax设置中设置的超时.这导致整页刷新

您在第一个pjax请求完成之前触发另一个pjax请求,这也导致完整页面刷新,因为pjax不支持多个并行刷新

如何解决#1

这个很容易,看起来你已经弄明白了.您只需要增加pjax-timeout值.您可以单独在每个窗口小部件实例上执行此操作,也可以像以下一样全局设置它:

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

上面的代码将所有pjax-instances的默认超时设置为5000ms.通常绰绰有余.对于复杂的Web应用程序,通常的默认值650ms相当紧凑.

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

如何解决#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;
}

Etvoilà!在触发pjax之前,您只需检查是否ajaxCounter == 0使用pjaxAllowed()如上所示的便利功能.如果你不想每次都检查这个,你可以实现自己的小pjax-request-stack.使用pjax提供的事件非常容易:Pjax-Events

我希望我能帮助你.这个也给我带来了一些麻烦;)!如果您需要更多信息,请告诉我......

常见的pjax调试

调试工具栏是你的朋友.确保preserve logs在Chrome的开发工具的网络选项卡中选中.否则,当页面重新加载时,您将丢失对请求的跟踪

如果您看到请求中止,那么通常这表示上面的问题@ 2

如果您发现请求返回的内容不是HTTP代码200,请检查Chrome开发工具中的响应预览.通常这会显示发生的异常.在这种情况下,您的问题是在服务器端.仔细检查你的PHP代码并修复它!

pjax容器中的链接是专门处理的.如果您希望它们触发周围的pjax-conatiner的刷新,请保持原样...否则将属性添加data-pjax="0"到它们.这表示如果单击此链接则不需要刷新.

阅读文档...花了5分钟:https://github.com/defunkt/jquery-pjax