Как сделать AJAX формы 1с-Битрикс в всплывающих окнах
Опубликовано 26 Окт 2011
Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
- можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
- всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
- весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.
Готовим javascript
Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(function() {
// ссылка для вызова окна должна иметь класс "popup"
$('a.popup').fancybox({
'overlayShow': false, // значения параметров можно посмотреть на сайте разработчика
'padding': 0,
'margin' : 0,
'scrolling' : 'no',
'titleShow': false,
'type': 'ajax',
'href': '/ajax_popup.php' // описание скрипта будет дано ниже по тексту:)
});
});
</script>
<a class="popup" href="">Открыть окно</a>
Готовим форму
Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php – он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем!!! на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘<?$APPLICATION->IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.
Все что выше этого куска кода заменяем на
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>
Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.
Все что ниже подключения компонента заменяем на
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>
Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.
Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)
Если нет настройки «Включить режим AJAX»
Заставить работать в режиме AJAX можно практически любой компонент в системе. Если нет необходимой группы параметров в окне настроек, то можно поступить 2 способами – добавить нужные параметры в .parameters.php шаблона компонента (об этом можно почитать в документации), или вписать напрямую в код вызова строки:
"AJAX_MODE" => "Y", // режим AJAX "AJAX_OPTION_SHADOW" => "N", // затемнять область "AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента "AJAX_OPTION_STYLE" => "Y", // подключать стили "AJAX_OPTION_HISTORY" => "N",
Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:
<?$APPLICATION->IncludeComponent("bitrix:iblock.element.add.form", "", array(
"IBLOCK_TYPE" => "catalog",
"IBLOCK_ID" => "7",
// ... куча свойств ...
"CUSTOM_TITLE_DETAIL_PICTURE" => "",
"AJAX_MODE" => "Y", // режим AJAX
"AJAX_OPTION_SHADOW" => "N", // затемнять область
"AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента
"AJAX_OPTION_STYLE" => "Y", // подключать стили
"AJAX_OPTION_HISTORY" => "N",
),
false
);?>
Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.
Loading ...
для меня открытие )
жаль вот этот http://dev.1c-bitrix.ru/community/webdev/group/78/blog/1731/ релоад капчи не работает с аякс формой
точней перестает работать после submit формы
Воспользовались вашей статьей, но никак не можем разобраться как сделать обработку формы в этом же окне все результаты обработки формы выводятся в файле – /ajax_popup.php. Как сделать обработку формы в этом же popup окне?
Помогите разобраться.
Виктория, я не совсем понял в чем проблема. В файле ajax_popup.php должен лежать компонент, который отвечает за вывод и обработку формы.
здравствуйте, спасибо большое за статью.
Мне необходимо сделать авторизацию как на bitrix.ru, при нажатии на ссылку «войти» появляется всплывающее окно авторизации (делала, как описывается в вашей статье), а вот при нажатии на иконки соц. сервисов, которые находятся в всплывающем окне, новое всплывающее окно с авторизацией через соц. сервисы прячется за первым и является не активным. Как это можно исправить?
Работал с компонентом system.auth.form написал как в статье, добавил поддержку Ajax в параметры компонента. но все при нажатии любой кнопки в компоненте (выход.выход.напомнить пароль) – загружается новое окно с одним этим единтвенным компонентом
Вы что-то делаете не так. Пример http://test.bxtemplates.ru/popup_test.php
Какие нибудь изменения с компонентом system.auth.form кроме включение Ajax – производились?
Работает точно так же как и в http://test.bxtemplates.ru/popup_test.php – но при входе (правильной авторизации) все равно новое окно
Если не сложно опубликуйте код system.auth.form
В компоненте ничего не менял, шаблон стандартный. Вот тестовый юзер на моем сайте – логин test, пасс testtest
Содержимое файла:
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>
<?$APPLICATION->IncludeComponent("bitrix:system.auth.form", ".default", array(
"AJAX_MODE" => "Y", // режим AJAX
"SHOW_ERRORS" => "Y",
"AJAX_OPTION_SHADOW" => "N", // затемнять область
"AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента
"AJAX_OPTION_STYLE" => "Y", // подключать стили
"AJAX_OPTION_HISTORY" => "N",
),
false
);?><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>
Перепроверил все еще что раз
при входе – будь то правильный пароль или не правильный – открывается новое окно
при выходе работает правильно
Может это связано с каким то еще библиотеками. Шаблон используется самописный
Столкнулся с той же проблемой, только использовал комплексный компонент голосований, результат голосования открывался не в диалог окне а на новой странице. Я решил просто подключить свой аякс, соответствено в компоненте отключил все что связано с аяксом битрикса, а так же сам скипт /bitrix/js/main/ajax.js. Далее в шаблоне компонента, который открывается первым в модальном окне (в моем случае voiting.form), после первой строки с подключением пролога добавил стандартный doctype, здесь подключил все нужные файлы для fancybox включая мой собственный аякс и в конце закрыл .
Весь код выводящий конвент в шаблоне поместил в обертку
Скрипт с аяксом выглядел так:
$(document).ready(function() {
……
$(«form#voiting-form»).bind(«submit», function() {
$.ajax({
type : «POST»,
cache : false,
url : «voiting.php»,
data : $(this).serializeArray(),
success: function(html) {
$(«div.voting-form-box-wrapper»).html(html);
}
});
return false;
});
…..
});
voiting.php – тот файл, где вызывается комплексный компонент голосования. В результате все стало выводиться в одном модальном окне. Сделать автоматически регулируемый размер не удалось, поэтому просто задал ширину и высоту окна с нормальным запасом.
Теги не вывелись в предыдущем комменте, суть в том чтобы прописать свой header в шаблоне doctype, html, head, body