Yii2 Pjax Gridview in Modal will reload page instead of updating - php

Question

I had a problem with Pjax, actually on somepage I load a view in Modal, and in this modal I use GridView with filter option with selectbox. When user changes the filter, the content will not be updated, but the page will be redirected to the filtered URL (Gridview with data updated).
When the view is working outside the modal it works fine, and update its contents!
Here is my code:
index.php, here I load my modal:
<div>
<?php
Modal::begin([
'header' => '',
'id' => 'modal-window',
'class' => 'modal',
'footer' => 'Close',
'clientOptions' => ['backdrop' => false]
]);
Modal::end();
?>
And in view:
<?php Pjax::begin(['id' => 'pjax_translation','enablePushState' => false, 'timeout' => false,]); ?>
<div class="row">
<h1><?= Html::encode($this->title) ?></h1>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'filterUrl' => Url::to(["translate/view" , "id" => $id ]),
'tableOptions' => ['class' => 'table table-striped table-bordered translate-list',"style"=> ""],
'options' => ['data-pjax' => true ],
'columns' => [
[
'attribute' => 'language',
'filter' => $arrLanguage,
'content'=> function($model) use ($arrLanguage){
return isset($arrLanguage[$model->language])? $arrLanguage[$model->language] : "" ;
},
'headerOptions' => ['width' => '150'],
],
[
'attribute' => 'translation',
],
],
]); ?>
</div>
<?php Pjax::end(); ?>
And in my controller the code is:
public function actionView($id)
{
$view = "view";
$searchModel = new TranslateMessageSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
$dataProvider->query->andFilterWhere([
'id' => $id,
]);
if (Yii::$app->request->isAjax) {
\Yii::$app->response->format = 'json';
$html = $this->renderAjax($view, [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'id'=>$id,
]);
return ['success' => true, 'html' => $html] ;
} else {
return $this->render($view, [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'id'=>$id,
]);
}
}

Answer 1

i found finally a solution after three days testing everything. I will post it here, maybe it could be usefull for someone who has the same problem.
I just put in my view.php the following js at the top:
$js = "$(document).on('submit', 'form[data-pjax]', function(event) {
$.pjax.submit(event, '#pjax_translation', {
'push': false,
'replace': false,
'timeout': 5000,
'scrollTo': false,
'maxCacheLength': 0
});
});";
$this->registerJs($js);
and everything is work fine now :)

Answer 2

this is working for me:
<?php Modal::begin([
'header' => '',
'id' => 'modal-window',
'class' => 'modal',
'toggleButton' => ['label' => 'click me'],
'footer' => 'Close',
'clientOptions' => ['backdrop' => false]
]); ?>
<?php Pjax::begin() ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => 1]]) ?>
<?= date('Y-m-d H:i:s', time()) ?> <button type="submit">click this</button>
<?php ActiveForm::end() ?>
<?php Pjax::end() ?>
<?php Modal::end(); ?>
PS: Maybe your page gets reloaded because you hit Pjax timeout