Using Pjax With Multiple GridView (Each Within jQuery Tabs)

I have the following setup where I am using jQuery tabs, with a GridView within each tab. With the code below all works fine (I can filter each GridView and can refilter), except for the fact that all three GridViews refresh if I filter any one of them, and I always end up back at the first tab after the refresh.


Pjax::begin(['timeout' => 10000]);


echo Tabs::widget([

    'options' => ['tab' => 'div'],

    'itemOptions' => ['tab' => 'div'],

    'items' => [

        [

            'options' => ['id' => 'tab-c'],

            'label' => 'Claimed',

            'content' => GridView::widget([

                            'dataProvider' => $claimed,

                            'filterModel' => $claimedModel,

                            'tableOptions' => ['id' => 'inquiry-claimed-grid', 'class' => 'table table-striped table-bordered'],

                            'columns' => [

                                ['class' => 'yii\grid\SerialColumn'],


                                'name',

                                'email',

                                'created',

                            ],

                         ]),

        ],

        [

            'options' => ['id' => 'tab-uc'],

            'label' => 'Unclaimed',

            'content' => GridView::widget([

                            'dataProvider' => $unclaimed,

                            'filterModel' => $unclaimedModel,

                            'tableOptions' => ['id' => 'inquiry-unclaimed-grid', 'class' => 'table table-striped table-bordered'],

                            'columns' => [

                                ['class' => 'yii\grid\SerialColumn'],


                                'name',

                                'email',

                                'created',

                            ],

                         ]),

        ],

        [

            'options' => ['id' => 'tab-comp'],

            'label' => 'Completed',

            'content' => GridView::widget([

                            'dataProvider' => $completed,

                            'filterModel' => $completedModel,

                            'tableOptions' => ['id' => 'inquiry-completed-grid', 'class' => 'table table-striped table-bordered'],

                            'columns' => [

                                ['class' => 'yii\grid\SerialColumn'],


                                'name',

                                'email',

                                'created',

                            ],

                         ]),

        ],

    ],

]);


Pjax::end();

I thought the issue might result from wrapping all three GridViews with one pjax. So I came up with the following where I wrap each GridView with pjax. Both problems from above are solved. Each GridView’s filter works, only that list refreshes and it does not jump back to the first tab each time. [color="#8B0000"]The only problem now is that I can only filter ONCE per GridView. All subsequent filters are ignored.[/color] I confirmed that for subsequent filters no ajax call is made. How do I fix this?


$tab1 = wrapPjax(GridView::widget([

            'dataProvider' => $claimed,

            'filterModel' => $claimedModel,

            'tableOptions' => ['id' => 'inquiry-claimed-grid', 'class' => 'table table-striped table-bordered'],

            'columns' => [

                ['class' => 'yii\grid\SerialColumn'],


                'name',

                'email',

                'created',

            ],

        ]));


$tab2 = wrapPjax(GridView::widget([

            'dataProvider' => $unclaimed,

            'filterModel' => $unclaimedModel,

            'tableOptions' => ['id' => 'inquiry-unclaimed-grid', 'class' => 'table table-striped table-bordered'],

            'columns' => [

                ['class' => 'yii\grid\SerialColumn'],


                'name',

                'email',

                'created',

            ],

        ]));


$tab3 = wrapPjax(GridView::widget([

            'dataProvider' => $completed,

            'filterModel' => $completedModel,

            'tableOptions' => ['id' => 'inquiry-completed-grid', 'class' => 'table table-striped table-bordered'],

            'columns' => [

                ['class' => 'yii\grid\SerialColumn'],


                'name',

                'email',

                'created',

            ],

        ]));


echo Tabs::widget([

    'options' => ['tab' => 'div'],

    'itemOptions' => ['tab' => 'div'],

    'items' => [

        [

            'options' => ['id' => 'tab-c'],

            'label' => 'Claimed',

            'content' => $tab1,

        ],

        [

            'options' => ['id' => 'tab-uc'],

            'label' => 'Unclaimed',

            'content' => $tab2,

        ],

        [

            'options' => ['id' => 'tab-comp'],

            'label' => 'Completed',

            'content' => $tab3,

        ],

    ],

]);


function wrapPjax($grid) {

    ob_start();


    Pjax::begin(['timeout' => 10000]);

    echo $grid;

    Pjax::end();

    

    return ob_get_clean();

}

I have the same problem once i search in the search field it remains at the particular tab, but next time i’m going to search another word than it redirects to first tab. If you found the solution than put here.

this post is a tutorial for using Pjax with multiple gridview. I have tried, it works perfect.

what post do you mean, while everything I see here is not solving the problem for me

Georg

Just in case someone will still read this, years after the initial post :)

First, thanks for the idea. I was struggling with Pjax in tabs and this solved it.

Since I use ListView, I don’t have filters, so I don’t have the problem with subsequent filters/searches. However, just an idea, in the docs it says that if $formSelector is not set, your form should have the data-pjax attribute:

http://www.yiiframew…Selector-detail