I ran into this same problem and the solve for me was to wrap both containers in ONE pjax block. That way I’m only updating the one pjax block and both containers are updated.
In my case the two divs are in different area. The one is in the main page content and the other in widget in the right area (like right sidebar). So it is impossible to do that in this way.
I spent about 1/2 day trying the pjax asynchronous reload and added code to my script to do a delay of a 1/2 second or more between the reload of one container and the next and nothing worked consistently and correctly which is why I ended up wrapping everything in one pjax block.
I used it to register on each container the function that will trigger the next one. that way when I reload the first container, all the others will get updated one by one, only once (by using one() instead of on()), and only when the previous one has finished. it worked perfectly with my code like if they where javascript promises. the following is the related code:
var pjaxContainers = ['#pjax-block-1', '#pjax-block-2', '#pjax-block-3'];
var nb_containers = pjaxContainers.length;
$.each(pjaxContainers , function(index, container) {
if (nb_containers > index + 1) {
$(container).one('pjax:end', function (xhr, options) {
$.pjax.reload({container: pjaxContainers[index+1]}) ;
});
}
});
$.pjax.reload({container: pjaxContainers[0]}) ;