Create Active Button In Gridview Pjax

I’m using kartik\grid\GridView

And I want to add a button, when you click it, it updates the active state (1 or 0) with pjax (or just ajax?)

I added this in my view index:


[

                'class' => 'kartik\grid\ActionColumn',

                'template' => '{update} {delete} {active}',

                'buttons' => [

                    'active' => function ($url, $model) {

                        if ($model->active == true)

                        {

                            $icon = 'glyphicon-eye-open';

                        } else {

                            $icon = 'glyphicon-eye-close';

                        }


                        return Html::a('<span class="glyphicon ' . $icon . '"></span>', $url, [

                            'title' => Yii::t('app', 'Update'),

                            'data-pjax' => '0',

                            'data-toggle-active' => $model->id,

                        ]);

                    },                    

                ],

                //'viewOptions'=>['title'=> 'View', 'data-toggle'=>'tooltip'],

                //'updateOptions'=>['title'=> 'Update', 'data-toggle'=>'tooltip'],

                //'deleteOptions'=>['title'=> 'Delete', 'data-toggle'=>'tooltip'],

            ],

And this in my controller:


    public function actionActive($id)

    {

        $model = $this->findModel($id);

        $model->active = ($model->active == 1) ? 0 : 1;


        return $model->save();

    }

Now when I click on the eye icon to set the active state, it just echo’s 1 because that’s what de save function returns

But this should be done with ajax and the grid should refresh

Should I add custom javascript like this?


$(function() {

    

    $(document).on('click', '[id^=toggle-active-]', function(e){


        //var request = $.post

        

        

        

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

    });

    

});

To simplify my question: how can I add a custom button to the gridview that uses an ajaxcall and refreshes the grid

I have been using something like this, it works very well for something like a gridview


		$.ajax({

			url:"/{MODEL}/{actionName}/?id="+id,

			type:'POST',

			success:function(result){

				$.pjax.reload({

					container:'#{WHATEVER PJAX ID}',

				});

			},

		});

awesome!


/**

     * Active toggle

     */

    $(document).on('click', '[data-toggle-active]', function(e){


        e.preventDefault();


        var id = $(this).data('toggle-active');


        $.ajax({

            url: 'index.php?r=pages/page/active&id=' + id,

            type: 'POST',

            success: function(result) {


                if (result == 1)

                {

                    // Success

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

                } else {

                    // Fail

                }

            }

        });


    });