yii2 loading pjax form dynamically - forms

Question

Problem: I want to update GridView in pjax style but it redirect to the form creation page.
What the code below does:
Having an index page with GridView to display data list and open a form in a modal window to create new record. The form code is added into the modal dynamically.
When click on "Create Country" button 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.
The code:
Controller CountryController.php
class CountryController extends Controller
{
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;
$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;
?>
<?php
$this->registerJs(
'$("document").ready(function(){
$("#pjax-create").on("pjax:end", function() {
$.pjax.reload({container:"#pjax-grid"}); //Reload GridView
});
});'
, View::POS_READY, 'pjax-create-end');
?>
<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>

Answer 1

Use Html::button instead Html::a and simple overwrite the content of the modal:
yii\bootstrap\Modal::begin(['id' => 'modal']);
echo '<div id="modal-content"></div>';
yii\bootstrap\Modal::end();
echo Html::button('Create Country', [
'onClick' => 'createCountry("' . Url::to([create]) . '")',
'class' => 'btn btn-primary'
]);
$script = <<< JS
function createCountry(url) {
$('#modal').modal('show').find('#modal-content').load(url);
}
JS
$this->registerJs($script, View::POS_END);