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 параметры, например для указания номера страницы и т.д.
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
Здравствуйте, подскажите, почему при таком выводе элементов, например товаров, которые содержат в себе торговые предложения они не добавляются через кнопку «В корзину», хотя в быстром просмотре кнопка работает?
Здравствуйте!
Если добавление в корзину происходит так же с помощью Ajax, то возможно не отрабатывается событие нажатия на кнопку для динамически загруженного контента. Попробуйте применить метод on:
$(document).ready(function() {
…
$(‘.button’).on(‘click’, ‘a’, function(e){
// Действие для добавления в корзину
});
…
});
Либо использовать кнопку добавления в корзину без Ajax.