javascript - Yii2 - Update data by switch toogle using Ajax/Pjax in GridView

Question

I want to update my data in GridView using Switch Toogle without refresh the current page.

Here is the image:

So I want to update the attribute status using the toogle switch like the image above.

Here is my code:

index.php

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    //'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yiigridSerialColumn'],

        //'alumni_id',
        'tahun_lulus',
        'file_excel',
        [
            'attribute' => 'status',
            'format' => 'raw',
            'value' => function($data){
                if($data->status==0){
                    return SwitchInput::widget([
                        'name' => 'status_11',
                        'pluginOptions' => [
                            'size' => 'mini',
                            'onColor' => 'success',
                            'offColor' => 'danger',
                            'onText' => 'Active',
                            'offText' => 'Inactive',
                        ],
                        'value' => true,
                    ]);
                }
                else if($data->status==1){
                    return SwitchInput::widget([
                        'name' => 'status_11',
                        'pluginOptions' => [
                            'size' => 'mini',
                            'onColor' => 'success',
                            'offColor' => 'danger',
                            'onText' => 'Active',
                            'offText' => 'Inactive',
                        ],
                        'value' => false,
                    ]);;
                }
            }
        ],
        //'deleted',
        'created_at',
        'updated_at',

        [ 'class' => 'yiigridActionColumn'],
    ],
]); ?>

How can I do that with Ajax/Pjax?

Answer 1

Before I suggest you the solution there is something you need to fix as you have redundant code inside the GridView that is below.

[
    'attribute' => 'status',
    'format' => 'raw',
    'value' => function($data){
        if($data->status==0){
            return SwitchInput::widget([
                'name' => 'status_11',
                'pluginOptions' => [
                    'size' => 'mini',
                    'onColor' => 'success',
                    'offColor' => 'danger',
                    'onText' => 'Active',
                    'offText' => 'Inactive',
                ],
                'value' => true,
            ]);
        }
        else if($data->status==1){
            return SwitchInput::widget([
                'name' => 'status_11',
                'pluginOptions' => [
                    'size' => 'mini',
                    'onColor' => 'success',
                    'offColor' => 'danger',
                    'onText' => 'Active',
                    'offText' => 'Inactive',
                ],
                'value' => false,
            ]);;
        }
    }
],

You can just pass the value of the $data->status to the value attribute of the SwitchInput rather than using if(){}else{}.

Then to implement what you are looking for you have to use the pluginEvent option of the SwitchInput and bind the switchChange.bootstrapSwitch event to send an ajax call whenever the status of the SwitchInput is changed so your code for the Griview should look like below

<?php
use kartikswitchinputSwitchInput;

$js = <<< JS
    function sendRequest(status, id){
        $.ajax({
            url:'/controller/action',
            method:'post',
            data:{status:status,id:id},
            success:function(data){
                alert(data);
            },
            error:function(jqXhr,status,error){
                alert(error);
            }
        });
    }
JS;

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


echo  GridView::widget(
    [
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yiigridSerialColumn'],
    
            //'alumni_id',
            'tahun_lulus',
            'file_excel',
            [
                'attribute' => 'status',
                'format' => 'raw',
                'value' => function ($data) {
                    return SwitchInput::widget(
                        [
                            'name' => 'status_11',
                            'pluginEvents' => [
                                'switchChange.bootstrapSwitch' => "function(e){sendRequest(e.currentTarget.checked, $data->id);}"
                            ],
                    
                            'pluginOptions' => [
                                'size' => 'mini',
                                'onColor' => 'success',
                                'offColor' => 'danger',
                                'onText' => 'Active',
                                'offText' => 'Inactive'
                            ],
                            'value' => $data->status
                        ]
                    );
                }
            ],
            //'deleted',
            'created_at',
            'updated_at',
    
            [ 'class' => 'yiigridActionColumn'],
        ],
    ]
); 

Note: just make sure you change the url:'/controller/action', to the actual URL and action. If you are not using prettyUrl then you must change it to index.php?r=controller/action.

Edit

I have updated the code above to pass the id of the row along with the status to your action in the controller, the action will get the variables like below.

public function actionUpdate(){
   $status = Yii::$app->request->post('status');
   $id = Yii::$app->request->post('id');

}