vorst.ru - Статьи о задачах возникающих при создании сайта и их решении

Редактирование и валидация модальной формы

Использование pop-up формы

Бывает, что количество полей в таблице не слишком велико и редактировать в модальном окне проще и нагляднее. Что необходимо, чтобы организовать стандартный набор операций - CReate, Update, Delete?


Как работает аутентификация OAuth2

OAuth2 аутентификация на примере Google

Если у вас есть аккаунт в Google, то вы наверняка пользовались документами. Например, электронными таблицами.

Доступ к таблицам разрешен только вам и тем, кому вы предоставите такое право. Причем доступ возможен не только из Google.

Можно просматривать список таблиц и редактировать выбранную таблицу оставаясь в рамках своего приложения. Примерно так - http://sample.vorst.ru/googl


Как устроена структура данных Nested Set

Как сделать рубрикатор

Рубрикатор, как средство поиска интересных статей, имеет свои недостатки - трудно придумать иерархию, названия рубрик, трудно потом решить к какой конкретно рубрике относится статья. "Но, так принято" - скажите вы и будете правы.


Цепочки статей в блоге

Можно ли сделать блог удобнее?

Для группировки статей существует возможность помечать статьи метками или прикреплять к наперед заданной рубрике. Кроме того, в конце статьи есть навигация - предыдущая, следующая статья, ну и меню конечно. Вроде все удобно.



Поиск



Редактирование и валидация модальной формы

Использование pop-up формы

  • 1. Редактирование и валидация модальной формы
  • 2. Как написать валидатор

Бывает, что количество полей в таблице не слишком велико и редактировать в модальном окне проще и нагляднее. Что необходимо, чтобы организовать стандартный набор операций - CReate, Update, Delete?


    Поделиться

Если нет времени, взгляните сюда yii2-modal-crud или продолжайте чтение.

View

views/mymodel/index.php должен начинаться с определения модального окна, в которое будет загружаться форма редактирования.

use yii\grid\GridView;
use yii\bootstrap\Modal;
echo Modal::widget([
    'id' => 'mymodel-win',
    'toggleButton' => false,
]);

Для добавления записей нужно разместить ссылку, например кнопку, перед списком записей.

<?= Html::a('<span class="glyphicon glyphicon-plus"></span> ' . 
    Yii::t('app', 'Add'), ['create'], [
        'id' => 'stat-add',
        'data-toggle' => 'modal',
        'data-target' => '#mymodel-win',
        'class' => 'btn btn-success',
        'onclick' => "$('#mymodel-win .modal-dialog .modal-content .modal-body').load($(this).attr('href'))",
    ]
) ?>

Для редактирования выбранной записи нужно также сослаться на модальное окно, загружая туда форму.

<?= GridView::widget([
    'id'=>'mymodel-grid',
    'dataProvider' => $dataProvider,
    'filterModel' => $searchMyModel,
    'layout' => "{items}\n{summary}\n{pager}",
    'columns' => [
        ...
        [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{update} {delete}',
            'buttons' => [
                'update' => function ($url, $model) {
                    return Html::a(
                        '<span class="glyphicon glyphicon-pencil"></span>', 
                        $url, [
                            'data-toggle' => 'modal',
                            'data-target' => '#mymodal-win',
                            'onclick' => "$('#mymodel-win .modal-dialog .modal-content .modal-body').load($(this).attr('href'))",
                        ]
                    );
                },
            ],
        ],
    ],
]); ?>

Controller

В действиях create и update должен быть вставлен код для обработки Ajax-запроса. Например для create:

public function actionCreate()
{
    $model = new MyModel();
    // Ajax
    $request = \Yii::$app->getRequest();
    if ($request->isAjax && $model->load($request->post())) {
        Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }
    // General use
    if ($model->load($request->post()) && $model->save()) {
        return $this->redirect(['index']);
    } else {
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

Так как Ajax-проверка одинакова для обоих действий (Create, Update), ее можно выделить в отдельный метод - validate.

public function actionValidate()
{
    $model = new MyModel();
    $request = \Yii::$app->getRequest();
    if ($request->isAjax && $model->load($request->post())) {
        Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }
}

Model

В виджете формы views/mymodel/_form.php необходимо разрешить Ajax-валидацию.

<?php $form = ActiveForm::begin([
    'id' => 'mymodel-form',
    'enableAjaxValidation' => true,
    ...
]) ?>

Если проверка была вынесена в отдельный метод, то нужно указать его явно.

<?php $form = ActiveForm::begin([
    'id' => 'mymodel-form',
    'enableAjaxValidation' => true,
    'validationUrl' => Url::toRoute(['mymodel/validate']),    
    ...
]) ?>

Если же используются сценарии, при определении правил валидации, то стоит обратите внимание, что отдельный метод Ajax-проверки ничего не знает об этих сценариях. Нужно предусмотреть возможность передачи сценария в контроллере controllers/MymodelController.php.

public function actionCreate()
{
    $model = new MyModel();
    $model->scenario = 'create';
    ...
}
public function actionValidate($scenario = false)
{
    $model = new MyModel();
    if($scenario)
        $model->scenario = $scenario;
    ...
}

и передать сценарий при выводе формы ввода views/mymodel/_form.php.

<?php $form = ActiveForm::begin([
    'id' => 'mymodel-form',
    'enableAjaxValidation' => true,
    'validationUrl' => Url::toRoute(['mymodel/validate', 'scenario' => $model->scenario]),
    ...
]) ?>

Заключение

Для организации редактирования в модальном окне можно воспользоваться расширением yii2-modal-crud.

Comments

  • Хороший блог. все понятно расписано, не то, что в инструкции, в которой вроде написано все, а толку мало :). Алексей
  • These pieces really set a standard in the indyutrs. Lettie
  • -- Thanks, but that's just one from options. SergeyMorozov

...

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.