How to reload multiple pjax

Question

i just want to know how to reload multiple pjax? this is my code

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

but only the #con_camp1 is the one that will reload.

Longlived

Answer 1

Try this.

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

Aecium

i vote for this. i use yii framework and the problem is the widget i use. but when i use other widgets, this code works. – Longlived

Yea this works @Aecium but if server takes time to process any of those ajax requests then your browser literally hangs untill it receives the response from server. Any workaround for that? – Broadbrim

Answer 2

You could just do

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

Stepson

Answer 3

Unfortunately Pjax by design doesn't allow multiple requests. In order to do those you have to nullify xhr parameter in $.pjax.

Basically like this:

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

Vaal

This "works" but then responses can come out of order. For example if pjax request A takes 10 seconds and pjax request B takes 2 seconds, response A will come in after response B, even though B was the last request made by the user. This is confusing and incorrect behavior. – Shock

Alex, setting the xhr to null as you showed worked for a similar issue I am having. Could you help me understand in simple terms why it gets "canceled"? – Adjourn

Answer 4

When using async:false both Chrome and Firefox are throwing this:

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/.

A different way to do it is to use the pjax:end event that will trigger when a container is completely reloaded to register the code that will reload the next one. That way they'll get reloaded one by one:

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]}) ;

Bort

Answer 5

I have faced the same issue , I have done in this way.

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

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

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

Muskeg

Answer 6

Something to add to the $.pjax.xhr=null solution, since this by itself has a bug- it will allow an earlier, but longer-running request to load the response data into the target container after a subsequent, faster running request. This would obviously be unexpected behavior. The user expects the latest click to be the one that loads the response into the container.

The solution is to add a reference to the previous xhr object somewhere it can be accessed on the next pjax event. I use the window namespace

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

Shock