Yii2 submit modal form with ajax - yii2

Question

I've success create modal form, but I can't submit it with ajax. Everytime i click submit button it not stay in the index page but instead show echo 1 from my Controller.
My controller
public function actionCreate()
{
$model = new Testing();
if ($model->load(Yii::$app->request->post())) {
if($model->save()){
echo 1;
}else{
echo 0;
}
}else{
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
My form
<div class="testing-form">
<?php $form = ActiveForm::begin(['id' => $model->formName()]); ?>
<?= $form->field($model, 'test')->textInput(['maxlength' => true]) ?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$this->registerJS("
$('form#{$model->formName()}'.on('beforeSubmit', function(e)
{
var \$form = $(this);
$.post(
\$form.attr('action'),
\$form.serialize()
)
.done(function(result) {
if(result == 1)
{
$(\$form).trigger('reset');
$.pjax.reload({container:'#issuehrGrid'});
}else
{
$('#message').html(result.message);
}
}).fail(function()
{
console.log('server error');
})
return false;
});"
);
?>
My view
<div class="report">
<h3>HR Issues</h3>
<?= Html::a('<span class="glyphicon glyphicon-plus"></span> Add', ['create'], ['class' => 'btn btn-success modalButton']) ?>
<?php Pjax::begin(['id'=>'issuehrGrid']); ?>
<table class="table table-bordered table-hover">
<tbody>
<?php foreach ($dataProvider->models as $hr) {
?>
<tr>
<td><?=$hr->test;?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php Pjax::end(); ?>
</div>
Please help me with this.
Thank you!

Answer 1

What I suspect is that it would be showing you the blank page with 1 displayed in it is because after the first submission your Pjax grid is reloaded via the statement
$.pjax.reload({container:'#issuehrGrid'});
and once reloaded your beforeSubmit event is not bound again to the form as the form Html is reloaded again and when you submit the form second time it just makes a simple form submit and displays the blank page with 1, you need to use the pjax:complete event for the pjax, so that one the grid is reloaded your script binds the beforeSubmit event to the form again.
Also, you have a syntax error in your script which should be fixed. Change your script to the following
<?php
$formName = $model->formName();
$js = <<<JS
$(document).on("ready pjax:complete",function(){
$('form#{$formName}').on('beforeSubmit', function(e){
var \$form = $(this);
$.post(
\$form.attr('action'),
\$form.serialize()
).done(function(result) {
if(result == 1)
{
$(\$form).trigger('reset');
$.pjax.reload({container:'#issuehrGrid'});
}else
{
$('#message').html(result.message);
}
}).fail(function()
{
console.log('server error');
})
return false;
});
});
JS;
$this->registerJS(
$js,
\yii\web\View::POS_READY
);
?>
UPDATE
and dont forget to change the controller action code and change the echo 1 to return 1 and echo 0 to return 0