AJAX в 1C-Битрикс
3 марта 2020 1С-Битрикс jQuery
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим в этой статье.
Обработчик AJAX
Для начала нам нужно создать файл, к которому будем обращаться через AJAX-запросы. Назовем его ajax.php и поместим в корень сайта. Так как файл должен отдавать только данные, то мы подключаем только API Битрикс:
<?require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");?>
Пускай наш AJAX-запрос будет отдавать последние 10 новостей с помощью компонента bitrix:news.list. Но вы можете использовать абсолютно любой компонент. Добавляем компонент в файл ajax.php:
<?require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");?>
<?$APPLICATION->IncludeComponent("bitrix:news.list","",Array(
"DISPLAY_DATE" => "Y",
"DISPLAY_NAME" => "Y",
"DISPLAY_PICTURE" => "Y",
"DISPLAY_PREVIEW_TEXT" => "Y",
"AJAX_MODE" => "Y",
"IBLOCK_TYPE" => "news",
"IBLOCK_ID" => "3",
"NEWS_COUNT" => "20",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"FILTER_NAME" => "",
"FIELD_CODE" => Array("ID"),
"PROPERTY_CODE" => Array("DESCRIPTION"),
"CHECK_DATES" => "Y",
"DETAIL_URL" => "",
"PREVIEW_TRUNCATE_LEN" => "",
"ACTIVE_DATE_FORMAT" => "d.m.Y",
"SET_TITLE" => "Y",
"SET_BROWSER_TITLE" => "Y",
"SET_META_KEYWORDS" => "Y",
"SET_META_DESCRIPTION" => "Y",
"SET_LAST_MODIFIED" => "Y",
"INCLUDE_IBLOCK_INTO_CHAIN" => "Y",
"ADD_SECTIONS_CHAIN" => "Y",
"HIDE_LINK_WHEN_NO_DETAIL" => "Y",
"PARENT_SECTION" => "",
"PARENT_SECTION_CODE" => "",
"INCLUDE_SUBSECTIONS" => "Y",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "3600",
"CACHE_FILTER" => "Y",
"CACHE_GROUPS" => "Y",
"DISPLAY_TOP_PAGER" => "Y",
"DISPLAY_BOTTOM_PAGER" => "Y",
"PAGER_TITLE" => "Новости",
"PAGER_SHOW_ALWAYS" => "Y",
"PAGER_TEMPLATE" => "",
"PAGER_DESC_NUMBERING" => "Y",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "Y",
"PAGER_BASE_LINK_ENABLE" => "Y",
"SET_STATUS_404" => "Y",
"SHOW_404" => "Y",
"MESSAGE_404" => "",
"PAGER_BASE_LINK" => "",
"PAGER_PARAMS_NAME" => "arrPager",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_ADDITIONAL" => ""
)
);?>Теперь, если открыть наш файл /ajax.php в браузере, то должны отобразится новости.
Здесь автоматизация бизнес-процессов в компании VIMS.
AJAX-запрос
AJAX-запросы мы будем отправлять с помощью jQuery. Код можно использовать на любой странице:
<div id="news"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: '/ajax.php',
beforeSend: function () {
// Вывод текста в процессе отправки
$('#news').html('<p style="text-align:center">Загрузка...</p>');
},
success: function (data) {
// Вывод текста результата отправки
$('#news').html('<p style="text-align:center">'+data+'</p>');
},
error: function (jqXHR, text, error) {
// Вывод текста ошибки отправки
$('#news').html(error);
}
});
});
</script>Как видите все довольно просто, мы отправляем AJAX-запрос к файлу ajax.php и выводим ответ в <div id="news"></div>. В запросе как обычно можно передавать GET и POST параметры, например для указания номера страницы и т.д.
Возникла задача интеграции лендинга с CRM Битрикс24. Лендинг самый обычный на HTML. Необходимо было создавать лиды из отправляемых с сайта форм обратной связи. В формах была отправка не только данных о пользователе - имя, телефон и e-mail, но и передача Читать далее
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Когда я создавал свою первую компоненту на битриксе для меня это показалось довольно сложным процессом. Вроде бы написано полно статей, русскоязычная документация, форум. Что ещё надо?! А то, что нет простой для понимания информации для новичка, который только начинает практиковаться Читать далее
Стандартно в комплексных компонентах битрикса используется компонент forum.topic.reviews, который не предусматривает древовидных ответов на комментарии, как например в соц. сетях. Получилось реализовать такой функционал стандартными средствами битрикса, с помощью другого компонента blog.post.comment - комментарии к сообщению блога, который входит в Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
Здравствуйте, подскажите, почему при таком выводе элементов, например товаров, которые содержат в себе торговые предложения они не добавляются через кнопку «В корзину», хотя в быстром просмотре кнопка работает?
Здравствуйте!
Если добавление в корзину происходит так же с помощью Ajax, то возможно не отрабатывается событие нажатия на кнопку для динамически загруженного контента. Попробуйте применить метод on:
$(document).ready(function() {
…
$(‘.button’).on(‘click’, ‘a’, function(e){
// Действие для добавления в корзину
});
…
});
Либо использовать кнопку добавления в корзину без Ajax.