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