Problem: I want to update GridView after submit form (modal window) in pjax style but it redirect to the form generation page.
What I want to do is similar to the wiki Yii 2.0: Pjax on ActiveForm and GridView - Yii2 , but the form is not put into yii\bootstrap\Modal initially but is loaded into #modal when click "Create" button on the page.
I want to display modal form for creating new record (or updating record displayed on GridView), then refresh the GridView after submitting the form. So the form is loaded dynamically.
Here is the code. What it intends to do is:
-
Having an index page with GridView to display data list. It has yii\bootstrap\Modal without any content inside it.
-
When click on "Create" button link on index page, it calls country/create to get the HTML code of the form and insert it into the modal, then it shows the modal window.
-
When click on the "Create" button on the form, it submit the form to country/create. This will return the HTML code of the index page, and I want it to update the GridView part, but it does not. Instead, it redirect to country/create.
Controller CountryController.php
class CountryController extends Controller
[code]{
public function actionIndex()
{
return $this->renderIndex();
}
public function actionCreate()
{
$model = new Country();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->renderIndex();
} else {
return $this->renderAjax('_form', [
'model' => $model,
]);
}
}
private function renderIndex()
{
$searchModel = new CountrySearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
}
View index.php
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\web\View;
/* @var $this yii\web\View */
/* @var $searchModel app\models\CountrySearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = Yii::t('app', 'Countries');
$this->params['breadcrumbs'][] = $this->title;
yii\bootstrap\Modal::begin(['id' => 'modal']);
yii\bootstrap\Modal::end();
?>
<div class="country-index">
<h1><?= Html::encode($this->title) ?></h1>
<div>Current Time: <?= date('Y/m/d H:i:s') ?></div>
<p><?= Html::a(Yii::t('app', 'Create Country'),
['create'],
['class' => 'btn btn-success show-modal']) ?>
</p>
<?php Pjax::begin(['id' => 'pjax-grid']); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'name',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end(); ?>
</div>
<?php
$this->registerJs("$(function() {
$('.show-modal').click(function(e) {
e.preventDefault();
$('#modal').modal('show').find('.modal-body')
.load($(this).attr('href'));
});
});", View::POS_READY, '.show-modal');
?>
View _form.php
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\web\View;
/* @var $this yii\web\View */
/* @var $model app\models\Country */
/* @var $form yii\widgets\ActiveForm */
?>
<?php
$this->registerJs(
'$("document").ready(function(){
$("#pjax-create").on("pjax:end", function() {
$.pjax.reload({container:"#pjax-grid"}); //Reload GridView
});
});'
);
?>
<div class="country-form">
<?php yii\widgets\Pjax::begin(['id' => 'pjax-create']) ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => TRUE]]); ?>
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>