Еще пол года назад я не вникал в то, как функционирует ajax в битриксе, компоненты с его поддержкой работали нормально, а те которые не поддерживали можно было кастомизировать с нужным функционалом не сложно. Вариантов как в конечном итоге реализовывать было несколько.
В один момент, мне всё же захотелось реализовать, используя подход самой цмс, и я начал использовать различные битриксовые функции. Не скажу, что от использования этого функционала я получал удовольствие, но оно работало и главное не вносило дополнительных зависимостей и это хорошо.
На днях мне в очередной раз стало необходимо сделать форму логина в отдельном окошке и соответственно это должно работать без перезагрузки. Кастомизировать компонент очень не хотелось, использовать дополнительную страницу, которая бы была контролером для ajax-запросов так же не хотелось. Про дополнительные шаблоны создавать для таких целей по мойму моветон. Поэтому по привычке стал почитывать код битрикса.
Решение оказалось очень простым.
Первое, что для меня оказалось новым – компонент принял параметры не объявленные в параметрах AJAX_MODE и AJAX_OPTION_JUMP. И приняв эти параметры – обернул компонент в дополнительный блок div с уникальным атрибутом id. Но по определенным причинам, к форме внутри этого блока не применился скрипт.
Поэтому, вторым шагом было добавления ajax.js в скрипты сайта, это делается вызовом функции CAjax::Init();
Третье, в шаблоне компонента нам осталось добавить к форме событие onSubmit, в котором будем перегружать содержимое того блока, которым обернул битрикс компонент. Это выглядит следующим образом:
onsubmit="return jsAjaxUtil.InsertFormDataToNode(this, 'comp_<?=$bxajaxid?>', true);"
Значение $bxajaxid динамическое – оно формируется для каждого компонента, и поэтому его надо узнать, перед тем как использовать. В классе CAjax есть для этого функция GetComponentID, первым параметром задаётся имя компонента, вторым – имя шаблона. Если имя шаблона не задано используется значение ".default". И в начале шаблона пишется:
<?php
$bxajaxid = CAjax::GetComponentID('bitrix:system.auth.form', 'personal');
?>
После чего используется во всех нужных местах.
В конце, надо добавить в форму еще поле:
<input type="hidden" name="bxajaxid" value="<?=$bxajaxid?>" />
После этих правок, форма уже будет работать.
И последнее, после того как пользователь авторизировался, необходимо обновить страницу. В возвращаемом стандартном шаблоне предусмотрено простой вывод ссылки "Выход". Тут необходимо вставить: <script>location.reload();</script>. Важно заметить, что в этом случае необходимо не отображать этот компонент для пользователей, которые уже авторизированы, потому что будет перезгружаться страница постоянно.
Вот собственно и всё – 5 строчек не сложного кода и работающий стандартный компонент без каких-либо зависимостей.
В один момент, мне всё же захотелось реализовать, используя подход самой цмс, и я начал использовать различные битриксовые функции. Не скажу, что от использования этого функционала я получал удовольствие, но оно работало и главное не вносило дополнительных зависимостей и это хорошо.
На днях мне в очередной раз стало необходимо сделать форму логина в отдельном окошке и соответственно это должно работать без перезагрузки. Кастомизировать компонент очень не хотелось, использовать дополнительную страницу, которая бы была контролером для ajax-запросов так же не хотелось. Про дополнительные шаблоны создавать для таких целей по мойму моветон. Поэтому по привычке стал почитывать код битрикса.
Решение оказалось очень простым.
Первое, что для меня оказалось новым – компонент принял параметры не объявленные в параметрах AJAX_MODE и AJAX_OPTION_JUMP. И приняв эти параметры – обернул компонент в дополнительный блок div с уникальным атрибутом id. Но по определенным причинам, к форме внутри этого блока не применился скрипт.
Поэтому, вторым шагом было добавления ajax.js в скрипты сайта, это делается вызовом функции CAjax::Init();
Третье, в шаблоне компонента нам осталось добавить к форме событие onSubmit, в котором будем перегружать содержимое того блока, которым обернул битрикс компонент. Это выглядит следующим образом:
onsubmit="return jsAjaxUtil.InsertFormDataToNode(this, 'comp_<?=$bxajaxid?>', true);"
Значение $bxajaxid динамическое – оно формируется для каждого компонента, и поэтому его надо узнать, перед тем как использовать. В классе CAjax есть для этого функция GetComponentID, первым параметром задаётся имя компонента, вторым – имя шаблона. Если имя шаблона не задано используется значение ".default". И в начале шаблона пишется:
<?php
$bxajaxid = CAjax::GetComponentID('bitrix:system.auth.form', 'personal');
?>
После чего используется во всех нужных местах.
В конце, надо добавить в форму еще поле:
<input type="hidden" name="bxajaxid" value="<?=$bxajaxid?>" />
После этих правок, форма уже будет работать.
И последнее, после того как пользователь авторизировался, необходимо обновить страницу. В возвращаемом стандартном шаблоне предусмотрено простой вывод ссылки "Выход". Тут необходимо вставить: <script>location.reload();</script>. Важно заметить, что в этом случае необходимо не отображать этот компонент для пользователей, которые уже авторизированы, потому что будет перезгружаться страница постоянно.
Вот собственно и всё – 5 строчек не сложного кода и работающий стандартный компонент без каких-либо зависимостей.