Как сделать AJAX формы 1с-Битрикс в всплывающих окнах

Эта статья посвящена одному из способов сделать в 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
);?>

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

Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:

Метки: , , ,

Категории: Bitrix

Комментарии (33)

  1. Павел:

    для меня открытие )
    жаль вот этот http://dev.1c-bitrix.ru/community/webdev/group/78/blog/1731/ релоад капчи не работает с аякс формой

  2. Павел:

    точней перестает работать после submit формы

  3. Виктория:

    Воспользовались вашей статьей, но никак не можем разобраться как сделать обработку формы в этом же окне все результаты обработки формы выводятся в файле — /ajax_popup.php. Как сделать обработку формы в этом же popup окне?
    Помогите разобраться.

  4. Виктория, я не совсем понял в чем проблема. В файле ajax_popup.php должен лежать компонент, который отвечает за вывод и обработку формы.

  5. Anga:

    здравствуйте, спасибо большое за статью.
    Мне необходимо сделать авторизацию как на bitrix.ru, при нажатии на ссылку «войти» появляется всплывающее окно авторизации (делала, как описывается в вашей статье), а вот при нажатии на иконки соц. сервисов, которые находятся в всплывающем окне, новое всплывающее окно с авторизацией через соц. сервисы прячется за первым и является не активным. Как это можно исправить?

  6. Работал с компонентом system.auth.form написал как в статье, добавил поддержку Ajax в параметры компонента. но все при нажатии любой кнопки в компоненте (выход.выход.напомнить пароль) — загружается новое окно с одним этим единтвенным компонентом

  7. Вы что-то делаете не так. Пример http://test.bxtemplates.ru/popup_test.php

  8. Какие нибудь изменения с компонентом system.auth.form кроме включение Ajax — производились?

  9. Работает точно так же как и в http://test.bxtemplates.ru/popup_test.php — но при входе (правильной авторизации) все равно новое окно

  10. Если не сложно опубликуйте код system.auth.form

  11. В компоненте ничего не менял, шаблон стандартный. Вот тестовый юзер на моем сайте — логин 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");?>

  12. Перепроверил все еще что раз
    при входе — будь то правильный пароль или не правильный — открывается новое окно
    при выходе работает правильно
    Может это связано с каким то еще библиотеками. Шаблон используется самописный

  13. Алексей:

    Столкнулся с той же проблемой, только использовал комплексный компонент голосований, результат голосования открывался не в диалог окне а на новой странице. Я решил просто подключить свой аякс, соответствено в компоненте отключил все что связано с аяксом битрикса, а так же сам скипт /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 — тот файл, где вызывается комплексный компонент голосования. В результате все стало выводиться в одном модальном окне. Сделать автоматически регулируемый размер не удалось, поэтому просто задал ширину и высоту окна с нормальным запасом.

  14. Алексей:

    Теги не вывелись в предыдущем комменте, суть в том чтобы прописать свой header в шаблоне doctype, html, head, body

  15. Andy:

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

    Если открыть один раз окно с вебформой, она аяксом открывается в fancybox и нормально общается с сервером асинхронно: без перегрузки страницы выдает все нужные ответы (типа не заполнено такое поле…)
    теперь если без перезагрузки закрыть одну и открыть другую форму, то она на при сабмите перекидывает на страницу ‘/ajax_popup.php’ — никакого аякса уже нету.

    Еще раз 1 раз работает, потом закрыть — открыть вторую — не работает!

    В чем может быть проблема?

    пока сделал, чо при клике на closebutton в fancybox’е происходит обновление страницы…

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

  17. Дэни:

    Алексей Валеев, подскажите, а как можно реализовать передачу переменных в форму.
    Допустим есть страница с компонентом catalog:section (список товаров) и при нажатии «купить» появляется всплывающая форма. Как в эту форму передать наименование и цену товара?
    Делал по Вашему примеру. Спасибо

  18. Дэни:

    сделал. в header.php шаблона записал
    форма.

    А в ссылку добавил
    <a href="#clickbuy" class="popup" onclick="document.getElementById('nameEl').innerHTML='’;
    document.getElementById(‘priceEl’).innerHTML=»;
    title=»Купить в 1 клик» rel=»nofollow»>Купить в 1 клик

  19. Дэни:

    *
    форма

  20. Вывел через fancybox свой компонент формы

    IncludeComponent(«demo:main.feedback», «.default», array(
    «USE_CAPTCHA» => «Y»,
    «OK_TEXT» => «Спасибо, ваше сообщение принято.»,
    «EXT_FIELDS» => array(
    0 => «Телефон»,
    1 => «»,
    ),
    «EMAIL_TO» => «askunash@gmail.com»,
    «REQUIRED_FIELDS» => array(
    0 => «NAME»,
    1 => «EMAIL»,
    2 => «MESSAGE»,
    ),
    «EVENT_MESSAGE_ID» => array(
    0 => «36″,
    )
    ),
    false
    );?>

    Все сделал как в статье, хорошо, работает попап окошко. Вот только проблема небольшая обнаружилась.
    На странице компонента почтовое событие срабатывает, а через попап окошко почему-то не работает.
    Никто не сталкивался? Может кто помочь?

  21. Спасибо. Очень интересно.
    Подскажите пожалуйста, как реализовать в компоненте контроллер, так, чтобы я мог обращаться к
    /ajax_popup.php/edit/forma1
    /ajax_popup.php/edit/forma2
    …?

  22. Павел и Павел:

    +1000

  23. Олег:

    Подскажите, пожалуйста.
    У меня всё время пишет ‘элемент не найден’.
    Где в ссылке или в компоненте указать передачу id в файл ajax_popup?

  24. Евгений:

    Добрый день сделал все по инструкции в результате нечего не сработало просто при нажатие на кнопку перезагружает эту же страницу в чем может быть ошибка?

  25. Иван:

    Огромное спасибо! все отлично работает! ваша статья очень помогла!

  26. Виталий:

    Ребят, подскажите, где я туплю.
    Я взял стандартный компонент авторизации(system.auth.form).

    Когда авторизован, при нажатии на кнопку «Выход» — выходит без перезагрузки, всё отлично(ошибок в консоле никаких), а когда я пытаюсь авторизоваться, то меня перебрасывает на другую страницу и показывает что я авторизован. При этом в консоле выдаётся вот такая ошибка:

    Uncaught TypeError: Object [object global] has no method ‘BX’

    Подскажите пожалуйста что сделать надо, чтобы всё заработало?

    P.s. Делаю всё на голом Bitrix. никаких изменений вообще нигде не делал.

  27. Виталий:

    Ну неужели никто помочь не сможет? Очень прошу!

  28. Алексей:

    Виталий, у меня была аналогичная проблема. Мне помог ответ Алексея от 10.02.2012 в 05:34

  29. Dmitry:

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

  30. Олек:

    Странно, ничего не выходит. Открывается новая страница с формой и все. Может версия БУС влияет? редакция стандарт 12.5.10

  31. Елена:

    Сделала все по инструкции, компонент bitrix:iblock.element.add.form
    Почему-то при возникновении ошибки компонент работает в режиме аякс, а при успешной отправке формы перенаправляется на файл ajax.php. Так и должно быть? Как исправить, чтобы сообщение об успешной отправке работало аяксом?

  32. Илья:

    кто нибудь смог реализовать, так чтобы размер окна менялся, если в форме появляется например аларм о том что какое-то обязательное поле не заполнено и соответственно высота всей формы увеличивается ? Как это сделать? Поделитесь пожалуйста. Делать запас по высоте, как пишет коммент, вообще не вариант, не красиво это.

  33. Ольга:

    Скажите, а как сделать, чтобы в popup окне открывалось только сообщение об отправке формы? Т.е., сама форма расположена на обычной странице. При нажатии на кнопку отправить появляется popup-окно с сообщением: «Спасибо! Ваша заявкая принята» (или что-то подобное) без перезагрузки страницы