Yii2: Search form not working with Gridview in Pjax

Question

There are some questions here, but the problem is in the filters that are in the gridview.

My problem is that I can not integrate an external form with the gridview itself because I do not want to use the search form that is part of the gridview.

Controller

public function actionIndex()
{
    $searchModel = new BlogSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    return $this->render('index', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
    ]);
}

Views index.php

<?= Html::button('Filter', ['data-toggle' => 'modal', 'data-target' => '#filter-modal', 'class' => 'btn btn-primary']) ?>

<?php
    Modal::begin([
        'header' => '<h3>Search Blog</h3>',
        'id' => 'filter-modal'
    ]);
    echo $this->render('_search', ['model' => $searchModel]);
    Modal::end();
?>

<?php Pjax::begin(); ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'title',
        'content'
    ]
]); ?>
<?php Pjax::end(); ?>

_search.php

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

<?= $form->field($model, 'title') ?>

<?= $form->field($model, 'content') ?>

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

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

In the "index.php" the gridview is inside the pjax, but the search form is outside, but even if the form was within "Pjax :: begin" it would not work, either.

That is, when I do the search the page is reloaded. I want only gridview updatated.

Answer 1

As far as I understood from the discussion you don't want to use the filter fields inside the GridView and want to use the search form instead to filter the GridView. if that is correct you need to do 2 things for that

1. Move your form inside the pjax block

index.php

<?= Html::button('Filter', ['data-toggle' => 'modal', 'data-target' => '#filter-modal', 'class' => 'btn btn-primary']) ?>
<?php Pjax::begin(['enablePushState'=>false]); ?>
<?php
    Modal::begin([
        'header' => '<h3>Search Blog</h3>',
        'id' => 'filter-modal'
    ]);
    echo $this->render('_search', ['model' => $searchModel]);
    Modal::end();
?>


<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'title',
        'content'
    ]
]); ?>
<?php Pjax::end(); ?>

2. And the second an most important thing is to include the option of data-pjax inside the form options.

_search.php

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

<?= $form->field($model, 'title') ?>

<?= $form->field($model, 'content') ?>

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

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

EDIT

You might find problem with the modal overlay staying there and the modal window itself hides, provide your form with an id like id=>"my-form" and add the following inside your _search.php file to bind the beforeSubmit event for ActiveFormJS

$this->registerJs('$("#my-form").on("beforeSubmit", function (e) {
$("#filter-modal").modal("hide");
});', \yii\web\View::POS_READY);