Yii2 ActiveForm. Часть 5

Yii2 ActiveForm

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы еще немного поработаем с Yii2 ActiveForm и попробуем отправить данные из формы асинхронно, используя виджет Pjax.

Начнем с того, что же такое Pjax. Данный виджет фреймворка является ни чем иным, как jQuery плагином, который позволяет отправить асинхронный запрос и обновить определенную часть страницы. При этом есть возможность реализовать полноценный переход по ссылкам с обновлением, к примеру, только контентной части. Все остальные элементы страницы (шапка, сайдбар, футер) при этом не будут запрашиваться с сервера. Это, как вы понимаете, значительно ускоряет загрузку страниц.

Для того, чтобы использовать возможности Pjax, необходимо обратиться к соответствующему виджету – yii\widgets\Pjax – и использовать пару его методов: begin и end. Контент между этими методами и будет обновляться динамически. Давайте попробуем обернуть нашу форму в блок Pjax.

<?php Pjax::begin() ?>
<?php $form = ActiveForm::begin([
 'id' => 'test-form',
 'options' => [
 'class' => 'form-horizontal',
 'data-pjax' => true,
 ],
 'fieldConfig' => [
 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>',
 ],
]); ?>
// поля формы
<?php ActiveForm::end(); ?>
<?php Pjax::end() ?>

Итак, для того, чтобы форма отправляла данные асинхронно, мы добавили к тегу form атрибут data-pjax. Ну и, конечно же, поместили всю форму между методами Pjax::begin() и Pjax::end(). Если теперь попробовать заполнить форму и нажать кнопку отправки – форма будет отправлена асинхронно, без перезагрузки страницы.

Давайте теперь напишем обработчик в экшене actionTest соответствующего контроллера.

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
public function actionTest(){
 $model = new TestForm();
 if(Yii::$app->request->isPjax){
 $answer = true;
 return $this->render('test', compact('model', 'answer'));
 }
 return $this->render('test', compact('model'));
}

Здесь мы проверили, поступил ли запрос Pjax – в этом случае к ответу (объект модели) мы добавляем переменную $answer со значением true. В противном случае просто отправляем объект модели. Осталось в представлении проверить наличие дополнительной переменной $answer и сигнализировать об успешной отправке данных. Добавим следующий код перед формой:

<?php if(!empty($answer)): ?>
 <p><code>Данные приняты</code></p>
<?php endif; ?>

После обновления страницы внешне абсолютно ничего не изменится.

Yii2 ActiveForm

Однако если мы заполним форму и нажмем кнопку, то данные будут отправлены асинхронно и перед формой будет выведено соответствующее сообщение.

Yii2 ActiveForm

При этом в консоли Yii Debugger мы увидим выполненный AJAX запрос.

Yii2 ActiveForm

Не очень сложно и очень удобно, не правда ли? На этом сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2. Быстрая разработка с современным фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree