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