Как использовать всплывающее окно для редактирования - vorst.ru

Pop-up форма


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

Простой метод редактирования не очень больших записей. Моменты, на которые стоит обратить внимание. Метод часто используется при разработке сайтов.

Pop-up форма

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

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


Представление

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'))",
            ]
          );
        },
      ],
    ],
  ],
]); ?>

Контроллер

В действиях 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);
  }
}

Форма ввода

В виджете формы 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]),
  ...
]) ?>

Заключение

Валидация в модальной форме требует особого внимания - ошибки трудно обнаружить. Если в контроллере используется отдельный метод для Ajax-валидации, проверьте, все ли параметры установлены для выполнения проверок. Модальные окна используются при работе в backend с моделями Comment, Rubric, Tag расширения sergmoro1/yii2-blog-tools (смотрите соответствующие контроллеры в качестве дополнительного примера).

комментарии

  • Алексей 03 Фев 2017

  • Fanny 26 Июл 2016

    Sergey Morozov 18 Июн 2018

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

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