How to update 2 pjax objects with one request?

Question

JavaScript

I have two grid tables on one page, each wrapped in its own PJAX with its own id. It is necessary that there would be an auto-update every n seconds. But can't get it to work right

<?php Pjax::begin([
                'id' => 'select_pjax'
            ])?>
            <?= GridView::widget([
                'dataProvider' => $dataProviderTemp,
                'columns' => [
                    ......]])
<?php
            $this->registerJs(
                '$("document").ready(function(){
                            setTimeout(function(){
                                $.pjax.reload({container:"#select_pjax"});  //Reload GridView
                            },5000);
                    });'
            );?>
<?php Pjax::end()?>
код всякий разный
<?php Pjax::begin([
                'id' => 'save_pjax'
            ])?>
            <?= GridView::widget([
                'dataProvider' => $dataProviderTemp,
                'columns' => [
                    ......]])
<?php
            $this->registerJs(
                '$("document").ready(function(){
                            setTimeout(function(){
                              $.pjax.reload("#save_pjax");  //Reload GridView
                            },4000);
                    });'
            );?>
<?php Pjax::end()?>

At some point, overlap occurs and only one request is processed. How can I make sure both are updated?

Answer 1

asynchronously they need to be executed
$.pjax.reload({ container: #id, async:false });

Answer 2

https://github.com/yiisoft/jquery-pjax
Call in js to update containers by their id, for example:

$.pjax.reload('#pjax-container', options);
$.pjax.reload('#pjax-container2', options);

You can hook on the event of the first container and update the second one.

Answer 3

Option 1. Use normal ajax

$.ajax({
    'success': function(data){
        var targets = [
            '#container1',
            '#container2'
        ];
        $.each(targets, function (ind, t) {
            $(t).html($(data).find(t).html());
        });
    }
});

Option 2: Use pjax but there will be 2 requests

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

PS Pjax developers have been contacted since 2012 with a request to make 1 request, they do not plan to do so