В данном методе мы не будем использовать BX.JS, а воспользуемся простым кодом на jQuery. Отправляем AJAX запрос на страницу с компонентом.
Добавляем аякс в компоненты Битрика
Задача – на странице отображается список карт с метками, по клику на страну должны подгружаться карты по фильтру.
Решение:
Сам компонент мы рассматривать не будем, начнем делать задачу и разбираться по шагам, что нам нужно:
Шаг 1. Создаем страницу с тем же компонентом.
Данный файл вы можете размещать либо в папке компонента, либо в шаблоне. Иногда, целесообразнее использовать корневую папку /ajax/. Итак, мой файл выглядит так:
<?
header("Content-type: application/json; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>
<?$APPLICATION->IncludeComponent(
"bitrix:news.list",
"map.list",
Array(
"SITE_ID" => $_REQUEST['SITE_ID'],
"AJAX" => 'Y',
// Ваш компонент
В шаге 2 и 3 дам объяснение что такое “SITE_ID” => $_REQUEST[‘SITE_ID’], “AJAX” => ‘Y’.
Шаг 2. Добавляем jQuery.
Без лишних вступлений, пишем такой код:
$(function(){
// change country
$(document).on('click', '.js-country.is-county', function(){
var $siteID = $(this).data('site-id');
$.ajax({
url: '/local/templates/templ/ajax/map.php',
type: 'post',
cache: false,
data: {'SITE_ID': $siteID},
}).done(function(data) {
$('#map-corners-wrapper').html(data);
});
return false;
});
..
Важные моменты из шага 2:
map.php – файл и путь относительно корня куда мы будем отправлять аякс запрос (шаг 1)
‘SITE_ID’: $siteID – SITE_ID, это параметр необходимый мне для фильтрации
Шаг 3. Добавляем в существующий шаблон компонента проверку на аякс.
Помимо основного кода нам нужно обернуть наш компонент в контейнер, который отобразиться только в том случае, если это не аякс:
<?if ($arParams['AJAX'] != 'Y') {?>
<div id="map-corners-wrapper">
<?}?>
// template компонента
<?if ($arParams['AJAX'] != 'Y') {?>
</div>
<?}?>
Данный код нужно добавлять в шаблон компонента, а именно в template.php.
map-corners-wrapper – наш уникальный id, в который мы и грузим результат
$arParams[‘AJAX’] != ‘Y’ – необходимый параметр из шага 1. Благодаря ему мы не будем создавать контейнер обёртку каждый раз. И нам также не придется заводить второй отдельный шаблон для аякса без этого контейнера (хотя раньше я делал именно так 🙂 ).
Подводные камни:
1. $(document).on(‘click’, ‘.js-country.is-county’, function(){ – обязательно записывать в таком виде чтобы работало после ajax.
2. параметры которые мы добавили в шаге 1 – не описаны в специальном файле, а это значит что при редактировании через визуальный редактор они будут стёрты. И хотя такой сценарий мало вероятен, про него нужно помнить.
