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>

Answer 1

Try using post method of Pjax:

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

Answer 2

This may be helpful to you

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