Can't show success message after saving data from yii2 ActiveForm (in modal)

Question

On main page I've got a button which call bootstrap modal with activeform. On submit this form adds new row in my db. But I dont look a success message neither in this modal nor on the main page. Instead I get to page mysite.ru/category/create with white screen and text of dialog message on it ("Dialog contents here..."). How not to redirect user on other page? Just close modal and/or redirect on main page and show here flashmessage about successful adding row.

my button in views/site/index.php:

<?= Html::button(
        'create',
        ['value' => Url::to(['category/create']),
            'id' => 'modalButton'

        ]) ?>


    <?php
    Modal::begin([
            'id' => 'modal'
        ]);

    echo "<div id='modalContent'></div>";

    Modal::end();
    ?>

my controller SiteController has:

public function actionIndex()
    { 
            return $this->render('index');
    }

CategoryController has

public function actionCreate()
        {
            $model = new Category;

            if ($model->load(Yii::$app->request->post()) && Yii::$app->request->isAjax) {
                $model->refresh();
                Yii::$app->response->format = 'json';
                return ActiveForm::validate($model);
            } elseif ($model->load(Yii::$app->request->post()) && $model->save()) {
                Yii::$app->session->setFlash('contactFormSubmitted');
                //$model->refresh();
                $this->refresh();
                Dialog::begin([
                    'clientOptions' => [
                        'modal' => true,
                    ],
                ]);

                echo 'Dialog contents here...';

                Dialog::end();
                //$this->redirect('category/create');

            } else {
                return $this->renderAjax('create', [
                    'model' => $model,
                ]);
            }

views/category/create.php:

<?php

use yii\helpers\Html;


/* @var $this yii\web\View */
/* @var $model app\models\Category */

$this->title = 'Create Category';
$this->params['breadcrumbs'][] = ['label' => 'Categories', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;

?>
<div class="category-create">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>

</div>

and views/category/_form.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\jui\Dialog;

/* @var $this yii\web\View */
/* @var $model app\models\Category */
/* @var $form yii\widgets\ActiveForm */
?>

<?php
$this->registerJsFile(Yii::getAlias('/scripts/main.js'));

?>

    <?php if (Yii::$app->session->hasFlash('contactFormSubmitted')): ?>

    <div class="alert alert-success">
        Thank you for contacting us. We will respond to you as soon as possible.
    </div>

    <?php endif; ?>



<div class="category-form">

    <?php $form = ActiveForm::begin([
                'id' => $model->formName(),
                //'enableAjaxValidation'=>true,
                'validateOnSubmit'=>true,
                //'action' => '/site/index'
            ]); ?>

    <?= $form->field($model, 'title')->textInput(['maxlength' => 255]) ?>

    <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

scripts/main.js:

// listen click, open modal and .load content
$('#modalButton').click(function (){
    $('#modal').modal('show')
        .find('#modalContent')
        .load($(this).attr('value'));
});

// serialize form, render response and close modal
function submitForm($form) {
    $.post(
        $form.attr("action"), // serialize Yii2 form
        $form.serialize()
    )
        .done(function(result) {
            form.parent().replaceWith(result);
                        //$form.parent().html(result.message);
            //$('#modal').modal('hide');
        })
        .fail(function() {
            console.log("server error");
            $form.replaceWith('<button class="newType">Fail</button>').fadeOut()
        });
    return false;
}

Answer 1

You have to prevent your form from being submited and use ajax.

            $(your_form)
            .on('beforeSubmit', function(event){ 
                event.preventDefault();
                submitForm($(your_form));

                return false;
            })
            .on('submit', function(event){
                event.preventDefault();
            });