Yii2 search form without reload page

Question

I have a page with tab layout. I build a search form for the gridview. But everytime I used the search, it reload the page and take me back to the first tab. How can I solve that problem?

Here's my code:

<?php $form = ActiveForm::begin([
     'options' => ['data-pjax' => true ],
    'action' => ['index'],
    'method' => 'get',
    ]); ?>

    Approve month: <input type="string" name="approvemonth"><br><br>
    Team: <input type="string" name="team"><br><br>
    Difficulty: <input type="string" name="difficulty">

    <div class="form-group">
    <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
    <?= Html::resetButton('Reset', ['class' => 'btn btn-default']) ?>
    </div>

<?php ActiveForm::end(); ?>


    <?php echo GridView::widget([
            'dataProvider' => $dataProvider15,
            'filterModel' => true,  
            'pjax'=>true,
            'panel' => [
                'type' => GridView::TYPE_PRIMARY,
                'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-user"></i>Avg total time by modeler without handover</h3>',
            ],
            'columns' => [
                [
                'attribute'=>'approvemonth', 
                'filter' => Html::input('string', 'approvemonth'),
                [
                    'attribute' =>'team',
                    'filter' => Html::input('string', 'team'),
                    // 'group' => true,
                ],
                [
                    'attribute' =>'difficulty',
                    'filter' => Html::input('string', 'difficulty'),
                    // 'group' => true,
                ],
                [
                    'attribute' =>'Total',
                    'format'=>['decimal',2]
                ],
                [
                    'attribute' =>'Avg',
                    'format'=>['decimal',2]
                ],
            ]
        ]); 
        ?> 

I tried pjax but it did not work. It didn't load anything.

Please help me with this.

Thank you.

Answer 1

That is because you donot have your form wrapped inside the

<?php Pjax::begin()?>
<?php Pjax::end()?>

and hence you page reloads every time you are trying to search although the results are displayed correctly.

Providing data-pjax=>1 for the options of the form is not enough you need to keep the form inside the begin() and end() section of Pjax. So change the code to the following.

<?php \yii\widgets\Pjax::begin();?>
<?php $form = ActiveForm::begin([
    'options' => ['data-pjax' => true],
    'action' => ['index'],
    'method' => 'get',
]);?>

    Approve month: <input type="string" name="approvemonth"><br><br>
    Team: <input type="string" name="team"><br><br>
    Difficulty: <input type="string" name="difficulty">

    <div class="form-group">
    <?=Html::submitButton('Search', ['class' => 'btn btn-primary'])?>
    <?=Html::resetButton('Reset', ['class' => 'btn btn-default'])?>
    </div>

<?php ActiveForm::end();?>


    <?php echo GridView::widget([
    'dataProvider' => $dataProvider15,
    'filterModel' => true,
    'pjax' => true,
    'panel' => [
        'type' => GridView::TYPE_PRIMARY,
        'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-user"></i>Avg total time by modeler without handover</h3>',
    ],
    'columns' => [
        [
            'attribute' => 'approvemonth',
            'filter' => Html::input('string', 'approvemonth'),
        ],
        [
            'attribute' => 'team',
            'filter' => Html::input('string', 'team'),
            // 'group' => true,
        ],
        [
            'attribute' => 'difficulty',
            'filter' => Html::input('string', 'difficulty'),
            // 'group' => true,
        ],
        [
            'attribute' => 'Total',
            'format' => ['decimal', 2],
        ],
        [
            'attribute' => 'Avg',
            'format' => ['decimal', 2],
        ],
    ],
]);
?>
<?php \yii\widgets\Pjax::end();?>