[SOLVED] Kartik Gridview / Pjax keeps refresh the whole page

Yii 2.0 General Discussions
1

Can some please help me?

I am using kartik gridview and the whole page keeps refreshing instead of the grid container.

view/index.php


$js = "$('#downloadSelected').on('click',function() {

            $.post(

                \"delete-multiple\", {

                    pk : $('#w0').yiiGridView('getSelectedRows')

                },

                function () {

                    $.pjax.reload({container:'#w0-container'});

                }

            );

        });

";

$this->registerJs($js, $this::POS_READY);


 echo GridView::widget([

    'dataProvider' => $dataProvider,

    'columns' => $gridColumns,

    'containerOptions' => ['style'=>'overflow: auto',], // only set when $responsive = false

    'headerRowOptions'=>['class'=>'kartik-sheet-style'],

    'filterRowOptions'=>['class'=>'kartik-sheet-style'],

    'pjax' => true, // pjax is set to always true for this demo

    'pjaxSettings' =>[

        'neverTimeout'=>true,

        'options'=>[

                'id'=>'w0',

            ]

        ],  

    'beforeHeader'=>[

        [

        'columns'=>[

        ['content'=>'Header Before 1', 'options'=>['colspan'=>5, 'class'=>'text-center warning']],

        ['content'=>'Header Before 2', 'options'=>['colspan'=>3, 'class'=>'text-center warning']],

        ['content'=>'Header Before 3', 'options'=>['colspan'=>3, 'class'=>'text-center warning']],

        ],

        'options'=>['class'=>'skip-export'] // remove this row from export

        ]

    ],


    // set your toolbar

    'toolbar' => [

    ['content'=>

    Html::button('<i class="glyphicon glyphicon-plus"></i>', ['type'=>'button', 'title'=>Yii::t('app', 'Add Book'), 'class'=>'btn btn-success', 'onclick'=>'alert("This will launch the book creation form.\n\nDisabled for this demo!");']) . ' '.

    Html::a('<i class="glyphicon glyphicon-repeat"></i>', ['grid-demo'], ['data-pjax'=>0, 'class' => 'btn btn-default', 'title'=>Yii::t('app', 'Reset Grid')])

    ],

    ],

    // parameters from the demo form

    'panel' => [

    'type' => GridView::TYPE_PRIMARY,

    'heading' => 'heading',

     'after'=>'<div class="pull-right"><button type="button" class="btn btn-primary" id="downloadSelected"><i class="glyphicon glyphicon-download-alt"></i> Download Selected</button></div><div style="padding-top: 5px;"><em>* The page summary displays SUM for first 3 amount columns and AVG for the last.</em></div>',

        ],

    'persistResize' => false,

    ]);

I am confused how to set the #w0 or #w0-pjax or #w0-container… The code above reload the grid, afterwhich, it refresh the whole page again. If I change the #w0-container in pjax.reload to #w0 like this :


$js = "$('#downloadSelected').on('click',function() {

            $.post(

                \"delete-multiple\", {

                    pk : $('#w0').yiiGridView('getSelectedRows')

                },

                function () {

                    $.pjax.reload({container:'#w0'});

                }

            );

        });

";

It calls the delete-multple function and did not refresh the page. But subsequently the button is not functioning anymore. Nothing happens after the first click.

Please help.

2

Is it caused by the way my controller returns? I am currently not returning anything. Not sure what to return too.





  public function actionDeleteMultiple()

    {

        $selection=(array)Yii::$app->request->post('pk');//typecasting

        foreach($selection as $id){

            echo ' id ' . $id . '<br />';

        }

         return;

        //return Hotel::deleteAll(['hotel_id' => $pk]);

    }
3

SOLVED!

Reply from Kartik :

Do not duplicate identifiers for HTML elements.

The pjax container id and grid id are identifiers for two different HTML elements and you cannot keep them same.

Check your generated HTML markup - you must have unique identifiers (the w0 above must not be duplicated).

Pjax container id is set via pjaxSettings[‘options’][‘id’]. It must be different than the grid identifier.

Check with something like this:




pjaxSettings['options']['id'] = `kv-unique-id-1';

And in your pjax reload


function () {

   $.pjax.reload({container:'#kv-unique-id-1'});

}

and I found that you should place the bulk action button OUTSIDE the grid which pjax reloads, otherwise the button only works the first time.

By Kartik :


Pjax will overwrite the entire grid content DOM and hence you need to reinitialize select2 jquery plugin since it lies within the grid DOM.


    OPTION 1: You can render the Select2 widget outside the grid container... this should be an easy fix -- but it may mean your UI design will not be the way you want OR

    OPTION 2: You reinitialize Select2 widget via JQuery. I have made the reinitialization easier... by storing the Select2 options in HTML5 data variable data-plugin-options within the source select input. So after the grid reload by trapping pjax:complete - you can reinitialize the Select2 widget. I will create a web tip for this and share For example:
1 Like