Pjax update multiple containers

Yii 2.0 General Discussions
1

Hi

According to this pjax do not support multiple update containers on the same request

The only way I found is


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

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

Both two html blocks can be refreshed by the same ajax request. I don’t want to overhead by two same requests.

How to do that in one request?

Thanks

2

No one has met this issue ??

I think is more important than seems!.. :)

3

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.

4

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.

5

Ahh yeah then you’re kind of screwed. :(

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.

There’s a thread on this on Stackoverflow here: http://stackoverflow.com/questions/31985286/how-to-reload-multiple-pjax

As you’ll see no-one else has a solve for it either… sorry.

6

Maybe core-team should be implement that.

By the time I wrote native code that replace the parts I want. But my code is not reusable neither stable…

7

I didn’t knew about ‘async:false’ so I used a different approach:

pjax has an event called "pjax:end": https://github.com/defunkt/jquery-pjax#events

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