Yii2 : Search in Gridview using Pjax POST Method with pagination

Question

I am beginner to yii2 & trying to search fields in Gridview using Pjax on search button. I have done this with GET method but I want to do this by using POST method. Then how can I do this with Yii2 Pjax(post method) with pagination?

Here is my code :

_details.php:

<?php          

    use yii\helpers\Html;                             
    use yii\widgets\ActiveForm;         
    use yii\widgets\Pjax;  
    use kartik\depdrop\DepDrop; 


    $js = <<<JS                       
           // get the form id and set the event                         
           $('#bank-details-form').on('beforeSubmit', function(e) {           
           var form = $(this);            
           if(form.find('.has-error').length) {           
                return false;       
            }   

            $.ajax({  
                url: form.attr('action'),    
                type: 'post',   
                data: form.serialize(),   
                success: function(response) {  
                    var txtValue = $("#bankdetails-bank_name").val();   
                    if(txtValue == "")  
                    {  
                        alert("Please select bank name");  
                        return false;  
                    }   

                    var bank_name = $('#bankdetails-bank_name option:selected').text();     
                    var state     = $('#bankdetails-state option:selected').text();     
                    var district  = $('#bankdetails-district option:selected').text();      
                    var city      = $('#bankdetails-city option:selected').text();           
                    var url       = form.attr('action')+ '&BankDetails[bank_name]='+bank_name+'&BankDetails[state]='+state+'&BankDetails[district]='+district+'&BankDetails[city]='+city;         

                    $.pjax.reload({url: url, container:'#bank-grid'});        
                }       
            });                                          
        }).on('submit', function(e){                              
                e.preventDefault();                         
        });

        JS;
        this->registerJs($js); ?>

        <div class="col-lg-5">                                            

        <?php                                  

            Pjax::begin(['id' => 'bank-form']);                          
            $form = ActiveForm::begin(['id'  => 'bank-details-form',           
                                    'method' => 'post',  
                                    ]);         

            if($_REQUEST['bank_name'])
            {
                $searchModel->bank_name = $selected;
            }

            // Bank level 1
            echo $form->field($searchModel, 'bank_name')->widget(DepDrop::classname(), [
            'data'    => $bankName,
            'options' => ['placeholder' => 'Select Bank'],
            'type'    => DepDrop::TYPE_SELECT2,

            'select2Options'  => ['pluginOptions'=>['allowClear'=>true]],
            'pluginOptions'   => [
                'depends'     => [''],
                'url'         => Url::to(['/students/child-account']),
                ]
            ]);

            // State level 2
            echo $form->field($searchModel, 'state')->widget(DepDrop::classname(), [
            'type'    => DepDrop::TYPE_SELECT2,
            'data'    => $bankState,
            'options' => ['placeholder'=>'Select State'],

            'select2Options'  => ['pluginOptions'=>['allowClear'=>true]],
            'pluginOptions'   => [
                'depends'     => ['bankdetails-bank_name'],
                'url'         => Url::to(['/students/child-account']),
                'loadingText' => 'Select Bank',
            ]
            ]);

            // District level 3
            echo $form->field($searchModel, 'district')->widget(DepDrop::classname(), [
            'data'    => $bankState,
            'options' => ['placeholder' => 'Select District'],
            'type'    => DepDrop::TYPE_SELECT2,

            'select2Options'  => ['pluginOptions'=>['allowClear'=>true]],
            'pluginOptions'   => [
                'depends'     => ['bankdetails-state'],
                'url'         => Url::to(['/students/auto-populate-districts']),
                'loadingText' => 'Select District',
            ]
            ]);

            // City level 4
            echo $form->field($searchModel, 'city')->widget(DepDrop::classname(), [
            'data'    => $bankCity,
            'options' => ['placeholder' => 'Select City'],
            'type'    => DepDrop::TYPE_SELECT2,

            'select2Options'  => ['pluginOptions'=>['allowClear'=>true]],
            'pluginOptions'   => [
                'depends'     => ['bankdetails-district'],
                'url'         => Url::to(['/students/auto-populate-cities']),
                'loadingText' => 'Select City',
            ]
            ]);

        ?>

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

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

    </div>

Cinderellacindi

Here is some minimal typos and unneeded space removal. – Zoltai

Answer 1

Try using post method of Pjax:

$.pjax.reload({url: url, method: 'POST', container:'#bank-grid'}); 

Wallas

Answer 2

This may be helpful to you

Pjax::begin(['id' => 'container-id', 'timeout' => false, 'enablePushState' => false, 'clientOptions' => ['method' => 'POST']]) 

Pyrophyllite

But be careful, POST seems to be working incorrectly with gridview when you filter some content and there is more then one page. Then pagination doesn't work correctly (prefiltered values got lost, cause pagination seems to be loosely coupled with GET ). The solution which worked for me was still using GET but without push state 'enablePushState' => false – Pyrophyllite

after doing 'enablePushState' => false browser back button behave weird when i click on any action button inside the pjax gridview. – Damoiselle

any solution on how to get pagination to work on 'method' => 'POST'? my search works fine, but now pagination doesn't work – Inhale

Answer 3

This simple and works, just add the line

_search.php

<?php $form = ActiveForm::begin([

    'options' => ['data-pjax' => true],  # <- 1
    'action' => ['index'],               
    'method' => 'get',                   
]) ?>

index.php

<?php Pjax::begin([

    'enablePushState' => false,         # <- 2
    'timeout' => false,                 # <- 3

]) ?> 
    
<?php  echo $this->render('_search', ['model' => $searchModel]) ?>

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'pager' => ['class' => \yii\bootstrap5\LinkPager::class],
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        ['class' => 'yii\grid\ActionColumn'],

        ...
    ],
]) ?>

<?php Pjax::end() ?>

Yii2 version 2.0.51

Nihilism

more beautiful combined with pace.js – Nihilism