Yii: Выводим модальное окно (быстрая форма обратной связи) на CJuiDialog
Для создания модальных (или диалоговых) окон в Yii есть удобный класс – CJuiDialog. Это окна, открывающиеся с помощью jQuery, когда посетитель сделает определённое вами действие, например, нажмёт по ссылке "Отправить заявку".
Покажу как сделал вывод такого окна у нас на loco.ru. Хочется сказать спасибо Белякову Юрию за внятную статью Yii - Использование CJuiDialog для создания модальных окон. Я лишь конкретизирую её и дополню подключением стилей оформления формы в модальном окне для моего случая.
Итак, создаю модель /models/QuickForm.php
<?php class QuickForm extends CFormModel { public $name; public $email; public $phone; public $message; public $current_url; public $verifyCode; public function rules() { return array( array('name, email, message', 'required'), array('phone, current_url', 'safe'), array('verifyCode', 'captcha', 'allowEmpty'=>!extension_loaded('gd') /*'captchaAction' => 'site/captcha'*/), ); } public function attributeLabels() { return array( 'name'=>'Ваше имя', 'phone'=>'Телефон', 'email'=>'Email', 'message'=>'Опишите задачу', 'verifyCode'=>'Код проверки', ); } }
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id' => 'mydialog',
'options' => array(
'title' => 'Отправить сообщение',
'autoOpen' => false,
'modal' => true,
'resizable'=> false,
),
));
$qForm = new QuickForm;
$form = $this->beginWidget('CActiveForm', array(
'id' => 'quick-form',
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
),
'htmlOptions'=>array(
'class'=>'form',
),
'action' => array('site/quick'), // когда форма показывается и в других контроллерах, не только 'site', то я в каждый из этих контроллеров вставил actionQuick, a здесь указал — array('quick'); почему-то не получается с array('//site/quick')
));
?>
<?php echo $form->errorSummary($qForm); ?>
<?php echo $form->labelEx($qForm,'name'); ?>
<?php echo $form->textField($qForm,'name', array('size'=>30)); ?>
<?php echo $form->error($qForm,'name'); ?>
<?php echo $form->labelEx($qForm,'email'); ?>
<?php echo $form->textField($qForm,'email', array('size'=>30)); ?>
<?php echo $form->error($qForm,'email'); ?>
<?php echo $form->labelEx($qForm,'phone'); ?>
<?php echo $form->textField($qForm,'phone', array('size'=>30)); ?>
<?php echo $form->error($qForm,'phone'); ?>
<?php echo $form->labelEx($qForm,'message'); ?>
<?php echo $form->textArea($qForm,'message',array('rows'=>6, 'cols'=>31)); ?>
<?php echo $form->error($qForm,'message'); ?>
<?php echo CHtml::submitButton('Отправить'); ?>
<?php $this->endWidget();
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
public function actionQuick() { $model=new QuickForm; $model->attributes=$_POST['QuickForm']; if($model->validate()) { $headers="From: $model->email\r\nReply-To: $model->email"; $body = "\n\nОтправитель: ".$model->name."\t Телефон: ".$model->phone."\t Email: ".$model->email."\t Задача: ".$model->message; mail(Yii::app()->params['adminEmail'],'Письмо с сайта loco.ru от'.$model->name, $body, $headers); } $this->redirect(array('site/index')); }
public function actionQuick() { $model=new QuickForm(); if(isset($_POST['QuickForm'])) { $model->attributes=$_POST['QuickForm']; if($model->validate()) { $headers="From: $model->email\r\nReply-To: $model->email"; $body = "\n\nОтправитель: ".$model->name."\t Телефон: ".$model->phone."\t Email: ".$model->email."\t Задача: ".$model->message; mail(Yii::app()->params['adminEmail'],'Письмо с сайта loco.ru от '.$model->name, $body, $headers, '-f email@yoursite.ru'); Dialog::message('flash-success', 'Отправлено!', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!'); //Yii::app()->user->setFlash('messageSent', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!'); $this->redirect($model->current_url); } } $this->redirect(isset($model->current_url) ? $model->current_url : array('website')); // нужно когда форма отправлена, чтобы не оставался белый экран без представления, т.к. не создавали специально /site/quick }
<?php echo CHtml::link('Отправить заявку на разработку интернет сайта', '#', array( 'onclick'=>'$("#mydialog").dialog("open"); return false;', 'class'=>'g-button g-button-orange', 'title'=>'Отправить заявку на разработку интернет сайта', ));?>
Позиционирование CJuiDialog Опция 'position'.
'options' => array( 'title' => 'Отправить сообщение', 'autoOpen' => false, 'modal' => true, 'resizable'=> false, 'position'=> '{ my: "left top", at: "left bottom", of: button }', ),
... 'onclick'=>'$("#mydialog").dialog("option", "position", "left").dialog("open"); return false;', ...
Вывод пользователю сообщения об успешной отправке его заявки.
Создаём представление /views/_dialog.php
<?php
if($flashes = Yii::app()->user->getFlashes()) {
foreach($flashes as $key => $message) {
if($key != 'counters') {
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>$key,
'options'=>array(
'show' => 'blind',
'hide' => 'explode',
'modal' => 'true',
'title' => $message['title'],
'autoOpen'=>true,
'dialogClass'=>$message['type'],
'buttons'=>array('Закрыть'=>'js:function() {$(this).dialog("close");}'),
'close'=>'js:function(e,ui){
$(this).dialog("destroy").remove();
}',
),
'htmlOptions'=>array(
'class'=>'flash-success',
),
));
printf('<span class="dialog">%s</span>', $message['content']);
$this->endWidget('zii.widgets.jui.CJuiDialog');
}
}
}
/models/Dialog.php
<?php class Dialog { public static function Message($type, $title, $message, $id = 0) { if($id == 0) $id = rand(1, 999999); Yii::app()->user->setflash($id, array('type'=>$type,'title' => $title, 'content' => $message) ); } } ?>
<?php $this->renderPartial('//site/_dialog'); ?> <?php echo $content; ?>
Dialog::message('flash-success', 'Отправлено!', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!');
//Yii::app()->user->setFlash('messageSent', 'Спасибо, '.$model->name.'! Ваше письмо отправлено!');
$this->redirect($model->current_url);
Автоматическое закрытие диалогового окна CJuiDialog в Yii после 5 секунд.
$this->beginWidget('zii.widgets.jui.CJuiDialog', array( 'id'=>'dialogbox', // additional javascript options for the dialog plugin 'options'=>array( 'title'=>'Dialog box 1', 'autoOpen'=>true, 'open' => 'js:function(event, ui) { setTimeout(function() { $("#dialogbox").dialog("close"); }, 5000); }', ), ));
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 14 Разработка приложения на Yii. Урок 14: Выводим список категорий как новый виджет на сайте (29.04.2015)
- 13 Разработка приложения на Yii. Урок 13: Внедряем категории для статей. (29.04.2015)
- 12 Разработка приложения на Yii. Урок 12: Профилирование приложения, включаем кеширование. (20.01.2015)
- 11 Yiico. Видеокурс по разработке сайта на Yii. Урок 11: Отладка приложения, включаем журналирование. (20.01.2015)
- 10 Yiico. Видеокурс по разработке сайта на Yii. Урок 10: Если ваше приложение находится не в корневой папке, а во вложенной. (19.10.2014)
- 9 Разработка сайта на Yii с нуля. Урок 9. Выборка статей определённого автора. (13.08.2014)
- 8 Разработка сайта на Yii с нуля. Урок 8. Вызов в моделях функции, общей для них. Как избегать дублирования кода? (25.07.2014)
- 7 Разработка сайта на Yii с нуля. Урок 7. Изменение количества выводимых записей на странице в CGridView. Включаем сессии Yii. (04.09.2013)
- 6 Разработка сайта на Yii с нуля. Урок 6. Автоматич. отправка оповещений об одобренных комментариях на email автора комментария (11.08.2013)
- 5 Разработка сайта на Yii с нуля. Урок 5. Переименовываем blog в yiico. Изменяем "Home" в breadcrumbs. Включаем Gzip-сжатие. (09.08.2013)
- 4 Курс по Yii с нуля. Урок 4. Дорабатываем простую работу с пользователями: хранение пароля при редактировании пользователя. (13.04.2013)
- 3 Курс по Yii с нуля. Урок 3. Создаём новых пользователей. Организуем простую систему авторизации. Аутентификация, пароли, соли. (20.07.2014)
- 2 Yii + Git (github) на Mac. (24.03.2013)
- 2 Курс по Yii с нуля. Урок 2. Переносим и настраиваем Yii и проект нашего сайта на рабочем сервере. Избавляемся от index.php в url (09.07.2014)
- 1 Курс по Yii с нуля. Урок 1. Устанавливаем Yii на локальном компьютере. Заводим проект будущего сайта. (10.03.2013)
- 0 Composer – пакетный менеджер PHP. Что и как? (22.07.2014)
- 0 MySQL: проверить содержится ли значение в поле столбца (в столбце хранится строка значений через запятую) (22.05.2014)
- 0 Yii: Статичные страницы (создание, редактирование, удаление) (28.04.2014)
- 0 Yii: Расширение ECKEditor = Связка ckeditor + kcfinder (визуальный редактор с бесплатным файловым менеджером) (28.04.2014)
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 Yii: Доступ к атрибуту модели из файла шаблона (Вызов в шаблоне какого-либо атрибута модели). (17.02.2014)
- 0 Yii: Множественный автокомплит с помощью CJuiAutoComplete (автокомплит нескольких значений в одно поле) (07.02.2014)
- 0 Yii: Фотогалерея через поведение (доработка расширения imagesgallerymanager) (08.03.2016)
- 0 Yii: Установка и настройка Yii-app заготовки приложения от Crisu83 (09.03.2014)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
7 комментариев
Exception:
Не определено свойство "QuickForm.current_url".
Подскажите в чем причина может быть?
И еще интересует ФРАЗА
Вызов действия 'action' => array('site/quick') у меня не срабатывал на страницах, представленных не с помощью контроллера 'site' (в котором и находится actionQuick), поэтому пришлось вставить этот экшн в те контроллеры, которые генерируют страницы с возможностью всплывающей формы.
Имеется ввиду , что нужно копировать весь код виджета на разных представлениях и менять только одну строку 'action' ?