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