Does Multiple Pjax Refresh On Success Work?


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.


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:

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