Does Multiple Pjax Refresh On Success Work?

Hello,

I have 2 pjax widgets on one page.

upon a successful ajax call they will not update.

If i comment first line out, second works, and vice versa.

$.pjax.reload({container: "#1-pjax", timeout: 2000});

$.pjax.reload({container: "#2-pjax", timeout: 2000});

should both refresh when called? Am i missing something?

This worked for me …

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

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

Thanks for the post. after reviewing code, i found that i had a duplicate name of a #container-pjax which is the one that was not refreshing. Changing the name so they are unique fixed the problem!

I have the same problem but mine are both unique IDs and only will update.

Just got it working using "angelcoding" method. Using async: false works for me, if I did not use this it would not work.

Hi,

Since I came across the same problem to refresh multiple pjax-containers in order today.

Just for completion of this thread: there is also following solution…

See the comment from Salem Ouerdani:

http://stackoverflow.com/questions/31985286/how-to-reload-multiple-pjax




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



Or in my case a littlebit "easier" to read:




$('#pjax-first-container').one('pjax:end', function () {

    $.pjax.reload({container: '#pjax-second-container'}) ;

});

$.pjax.reload({container:'#pjax-first-container'});



Regards