Делаем ajax формы в битрикс на страницах и в всплывающих окнах

Рано или поздно, разработчик 1с-битрикс, задается вопросом: а как же мне сделать аякс форму в битриксе?
Не секрет, что в 1с-битрис «режим AJAX» можно включить практически в каждом компоненте в его настройках, но есть и такие компоненты в которых по каким то причинам нет этой настройки. Например возьмем такой компонент как «Добавление элементов инфоблока», вот код этого компонента:

<?$APPLICATION->IncludeComponent(
    "bitrix:iblock.element.add",
    "",
    Array(
        "AJAX_MODE" => "N",
        "AJAX_OPTION_ADDITIONAL" => "",
        "AJAX_OPTION_HISTORY" => "N",
        "AJAX_OPTION_JUMP" => "N",
        "AJAX_OPTION_STYLE" => "Y",
        "ALLOW_DELETE" => "Y",
        "ALLOW_EDIT" => "Y",
        "CUSTOM_TITLE_DATE_ACTIVE_FROM" => "",
        "CUSTOM_TITLE_DATE_ACTIVE_TO" => "",
        "CUSTOM_TITLE_DETAIL_PICTURE" => "",
        "CUSTOM_TITLE_DETAIL_TEXT" => "",
        "CUSTOM_TITLE_IBLOCK_SECTION" => "",
        "CUSTOM_TITLE_NAME" => "",
        "CUSTOM_TITLE_PREVIEW_PICTURE" => "",
        "CUSTOM_TITLE_PREVIEW_TEXT" => "",
        "CUSTOM_TITLE_TAGS" => "",
        "DEFAULT_INPUT_SIZE" => "30",
        "DETAIL_TEXT_USE_HTML_EDITOR" => "N",
        "ELEMENT_ASSOC" => "CREATED_BY",
        "GROUPS" => array(),
        "IBLOCK_ID" => "",
        "IBLOCK_TYPE" => "",
        "LEVEL_LAST" => "Y",
        "MAX_FILE_SIZE" => "0",
        "MAX_LEVELS" => "100000",
        "MAX_USER_ENTRIES" => "100000",
        "NAV_ON_PAGE" => "10",
        "PREVIEW_TEXT_USE_HTML_EDITOR" => "N",
        "PROPERTY_CODES" => array(),
        "PROPERTY_CODES_REQUIRED" => array(),
        "RESIZE_IMAGES" => "N",
        "SEF_MODE" => "N",
        "STATUS" => "ANY",
        "STATUS_NEW" => "N",
        "USER_MESSAGE_ADD" => "",
        "USER_MESSAGE_EDIT" => "",
        "USE_CAPTCHA" => "N"
    )
);?>

и как видим в нем нет настройки «режим AJAX». Для того, чтобы форма стала работать с помощью ajax нужно добавить несколько элементов в массив настроек компонента, а именно:

"AJAX_MODE" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",

в итоге получаем код компонента

<?$APPLICATION->IncludeComponent(
    "bitrix:iblock.element.add",
    "",
    Array(
        "AJAX_MODE" => "N",
        "AJAX_OPTION_ADDITIONAL" => "",
        "AJAX_OPTION_HISTORY" => "N",
        "AJAX_OPTION_JUMP" => "N",
        "AJAX_OPTION_STYLE" => "Y",
        "ALLOW_DELETE" => "Y",
        "ALLOW_EDIT" => "Y",
        "CUSTOM_TITLE_DATE_ACTIVE_FROM" => "",
        "CUSTOM_TITLE_DATE_ACTIVE_TO" => "",
        "CUSTOM_TITLE_DETAIL_PICTURE" => "",
        "CUSTOM_TITLE_DETAIL_TEXT" => "",
        "CUSTOM_TITLE_IBLOCK_SECTION" => "",
        "CUSTOM_TITLE_NAME" => "",
        "CUSTOM_TITLE_PREVIEW_PICTURE" => "",
        "CUSTOM_TITLE_PREVIEW_TEXT" => "",
        "CUSTOM_TITLE_TAGS" => "",
        "DEFAULT_INPUT_SIZE" => "30",
        "DETAIL_TEXT_USE_HTML_EDITOR" => "N",
        "ELEMENT_ASSOC" => "CREATED_BY",
        "GROUPS" => array(),
        "IBLOCK_ID" => "",
        "IBLOCK_TYPE" => "",
        "LEVEL_LAST" => "Y",
        "MAX_FILE_SIZE" => "0",
        "MAX_LEVELS" => "100000",
        "MAX_USER_ENTRIES" => "100000",
        "NAV_ON_PAGE" => "10",
        "PREVIEW_TEXT_USE_HTML_EDITOR" => "N",
        "PROPERTY_CODES" => array(),
        "PROPERTY_CODES_REQUIRED" => array(),
        "RESIZE_IMAGES" => "N",
        "SEF_MODE" => "N",
        "STATUS" => "ANY",
        "STATUS_NEW" => "N",
        "USER_MESSAGE_ADD" => "",
        "USER_MESSAGE_EDIT" => "",
        "USE_CAPTCHA" => "N",
        "AJAX_MODE" => "Y",
        "AJAX_OPTION_SHADOW" => "N",
        "AJAX_OPTION_JUMP" => "N",
        "AJAX_OPTION_STYLE" => "Y",
        "AJAX_OPTION_HISTORY" => "N",
    )
);?>

Так же вы могли просто добавить нужные параметры в .parameters.php шаблона компонента bitrix:iblock.element.add и настройка «режим AJAX» появилась бы в компоненте.

Такой компонент уже можно использовать на страницах вашего проекта, но нам так же может понадобиться открывать форму в всплывающем окне, например fancybox. На странице есть ссылка <a class=»form_popup» href=»»>Открыть форму</a> по которой мы ожидаем получить всплывающее окно с формой и для этого мы делаем следующее:

1. Создаем страницу /form/ajax_form.php для формы и добавляем в нее наш компонент

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
<?$APPLICATION->IncludeComponent(
    "bitrix:iblock.element.add",
    "",
    Array(
        "AJAX_MODE" => "N",
        "AJAX_OPTION_ADDITIONAL" => "",
        "AJAX_OPTION_HISTORY" => "N",
        "AJAX_OPTION_JUMP" => "N",
        "AJAX_OPTION_STYLE" => "Y",
        "ALLOW_DELETE" => "Y",
        "ALLOW_EDIT" => "Y",
        "CUSTOM_TITLE_DATE_ACTIVE_FROM" => "",
        "CUSTOM_TITLE_DATE_ACTIVE_TO" => "",
        "CUSTOM_TITLE_DETAIL_PICTURE" => "",
        "CUSTOM_TITLE_DETAIL_TEXT" => "",
        "CUSTOM_TITLE_IBLOCK_SECTION" => "",
        "CUSTOM_TITLE_NAME" => "",
        "CUSTOM_TITLE_PREVIEW_PICTURE" => "",
        "CUSTOM_TITLE_PREVIEW_TEXT" => "",
        "CUSTOM_TITLE_TAGS" => "",
        "DEFAULT_INPUT_SIZE" => "30",
        "DETAIL_TEXT_USE_HTML_EDITOR" => "N",
        "ELEMENT_ASSOC" => "CREATED_BY",
        "GROUPS" => array(),
        "IBLOCK_ID" => "",
        "IBLOCK_TYPE" => "",
        "LEVEL_LAST" => "Y",
        "MAX_FILE_SIZE" => "0",
        "MAX_LEVELS" => "100000",
        "MAX_USER_ENTRIES" => "100000",
        "NAV_ON_PAGE" => "10",
        "PREVIEW_TEXT_USE_HTML_EDITOR" => "N",
        "PROPERTY_CODES" => array(),
        "PROPERTY_CODES_REQUIRED" => array(),
        "RESIZE_IMAGES" => "N",
        "SEF_MODE" => "N",
        "STATUS" => "ANY",
        "STATUS_NEW" => "N",
        "USER_MESSAGE_ADD" => "",
        "USER_MESSAGE_EDIT" => "",
        "USE_CAPTCHA" => "N",
        "AJAX_MODE" => "Y",
        "AJAX_OPTION_SHADOW" => "N",
        "AJAX_OPTION_JUMP" => "N",
        "AJAX_OPTION_STYLE" => "Y",
        "AJAX_OPTION_HISTORY" => "N",
    )
);?>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

2. Создаем шаблон «popup» с простым содержимым

<!DOCTYPE>
<html>
<head>
    <?$APPLICATION->ShowHead();?>
</head>
<body>
#WORK_AREA#
</body>
</html>

В настройках сайта этот шаблон ставим для нашего файла с формой /form/ajax_form.php

3. javascript который откроет наше всплывающее окно.

<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">
    $(document).ready(function(){
        $('a.form_popup').fancybox({
            'overlayShow': false,
            'padding': 0,
            'margin' : 0,
            'scrolling' : 'no',
            'titleShow': false,
            'type': 'ajax',
            'href': '/form/ajax_form.php'
        });
    });
</script>

Хочу заметить, что сначала я пробовал без создания дополнитльеного шаблона для страницы /form/ajax_form.php указывая плолог и епилог чтобы битрикс не вставлял шапку и подвал:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?$APPLICATION->IncludeComponent(
    "bitrix:iblock.element.add",
    "",
    Array(
        ...
    )
);?>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

но дело в том, что при клике на кнопку результат открывался в новом окне, а не в сплывающем окне.

Если кто вкурсе как обойтись без созданния шаблона, то отпишитесь пожалуйста.

Рубрики: Development, Статьи
Метки: , ,

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

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