How to use Pjax with a Custom Button in Gridview - yii2

Question

This is my gridview
<?php Pjax::begin(['id' => 'vouchers']) ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
['header'=>'Cancel Voucher',
'value'=> function($data)
{
return Html::a(Yii::t('app', ' {modelClass}', [
'modelClass' =>"Cancel",
]), ['generalentries/cancel_voucher','voucher_no'=>$data->voucher_no],
['class' => 'btn btn-xs btn-danger',
'onclick'=>"return confirm('Are you Sure you want to CANCEL this Voucher?');"]
);
},
'format' => 'raw'
],
],
]); ?><?php Pjax::end() ?>
and this is my cancel_voucher action
public function actionCancel_voucher( $voucher_no )
{
$entries = TabGLEntry::find()->where(['voucher_no' => $voucher_no])->all();
foreach($entries as $entry)
{
$entry->update_note = FALSE;
$entry->is_deleted = 1;
$entry->save();
}
$this->redirect( Yii::$app->request->referrer );
}
How can i update the grid view using pjax when i click on the Cancel Button?
I tried giving button an id and then on the onClick event of the button i tried to update the gridview using $.pjax.reload({container:"#vouchers"}); But it didn't work
EDIT
This is how i tried
<?php
\yii\widgets\Pjax::begin([
'id' => 'countries',
'timeout' => false,
// 'enablePushState' => false,
'clientOptions' => ['method' => 'POST']])
?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
['header'=>'Cancel Voucher',
'value'=> function($data)
{
return Html::a(Yii::t('app', ' {modelClass}', [
'modelClass' =>"Cancel",
]), ['generalentries/cancel_voucher','voucher_no'=>$data->voucher_no],
['class' => 'btn btn-xs btn-danger','id' =>'cancel_voucher',
'onclick'=>"return confirm('Are you Sure you want to CANCEL this Voucher?');"]
);
},
'format' => 'raw'
],
<?php
$this->registerJs(
'jQuery(document).ready(function($){
$(document).ready(function () {
$("#cancel_voucher").on("click", function(){
alert("hai");
$.pjax.reload({container:"#countries"});
});
});
});'
);
?>
Issue

Answer 1

You have to return content, which will be showing in Pajax block instead of $this->redirect( Yii::$app->request->referrer );
public function actionCancel_voucher( $voucher_no )
{
$entries = TabGLEntry::find()->where(['voucher_no' => $voucher_no])->all();
foreach($entries as $entry)
{
$entry->update_note = FALSE;
$entry->is_deleted = 1;
$entry->save();
}
if (Yii::$app->getRequest()->getIsPjax()) {
//render part of view with grid
return $this->renderAjax($url, $params);
}
else { $this->redirect( Yii::$app->request->referrer ); }
}
For correct pajax redirect you have to setup X-Pjax-Url header.
if (Yii::$app->getRequest()->getIsPjax()) {
$response = Yii::$app->getResponse();
$destination = Url::to($url);
$response->getHeaders()->set('X-Pjax-Url', $destination);
$response->getHeaders()->set('Location', $destination);
return null;
}