如何重新加载多个pjax

Question

我只是想知道如何重新加载多个pjax？这是我的代码

        $.pjax.reload({container:"#con_camp"});
        $.pjax.reload({container:"#con_camp1"});

但只有＃con_camp1才会重新加载。

Answer 1

试试这个。

   $.pjax.reload({container: "#1-pjax", async:false});
    $.pjax.reload({container: "#2-pjax", async:false});

Answer 2

你可以做到

$.pjax.reload({container: '#container_1'}).done(function () {
    $.pjax.reload({container: '#container_2'});
});

Answer 3

不幸的是，Pjax设计不允许多个请求。为了做那些你必须使xhr中的$.pjax参数无效。

基本上是这样的：

$.pjax.reload({container:"#con_camp"});
$.pjax.xhr = null;
$.pjax.reload({container:"#con_camp1"});
$.pjax.xhr = null; // so that some next pjax request wont cancel this reload.

Answer 4

当使用async:false时，Chrome和Firefox都会抛出这个：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

另一种方法是使用pjax:end事件，该事件将在完全重新加载容器时触发，以注册将重新加载下一个容器的代码。这样他们就会一个接一个地重装：

var pjaxContainers = ['#pjax-block-1', '#pjax-block-2', '#pjax-block-3'];

$.each(pjaxContainers , function(index, container) { 
     if (index+1 < pjaxContainers.length) {
          $(container).one('pjax:end', function (xhr, options) {
               $.pjax.reload({container: pjaxContainers[index+1]}) ;
          });
     }
});

$.pjax.reload({container: pjaxContainers[0]}) ;

Answer 5

我遇到过同样的问题，我这样做了。

 <?php Pjax::begin(['id'=>'pjax_id']); ?>

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

// Under SCRIPT tag
    $.pjax.reload({container: '#pjax_id', async: false});

Answer 6

要添加到$.pjax.xhr=null解决方案的东西，因为它本身有一个错误 - 它将允许更早但更长时间运行的请求在后续的更快运行的请求之后将响应数据加载到目标容器中。这显然是出乎意料的行为。用户希望最新的点击是将响应加载到容器中的点击。

解决方案是添加对前一个xhr对象的引用，可以在下一个pjax事件中访问它。我使用窗口命名空间

$('.pjax-container').on('pjax:send', function(event, xhr, options) {
    // unique data attribute of the pjax container
    xhrName=$(this).attr('data-myXhrName');
    // abort pending requests because we are allowing multiples
    if (window.xhrRef[xhrName]) {
        window.xhrRef[xhrName].abort();
    }
    $.pjax.xhr=null;

    window.xhrRef[xhrName]=xhr;
})
.on('pjax:complete', function(event, xhr, options) {    
        xhrName=$(this).attr('data-myXhrName');
        // we're done with it
        window.xhrRef[xhrName]=false;
})