如何重新加载多个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

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

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check 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 3

你可以这样做

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

Answer 4

不幸的是，Pjax 的设计不允许多个请求。为了执行这些操作，您必须使 $.pjax.

中的 xhr 参数无效

基本上是这样的：

$.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 5

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

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

$('.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;
})

Answer 6

我遇到过同样的问题，我是这样处理的。

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

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

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

如何重新加载多个pjax

How to reload multiple pjax

pjax

yii2