AJAX подгрузка списка элементов - techart/bitrix.tao GitHub Wiki

Bitrix.TAO обладает простым встроенным механизмом для отображения списков элементов с AJAX-подгрузкой, в т.ч. и обработчик запросов, отдающий список элементов любого инфоблока в соответствии с переданными параметрами. Прежде всего следует явным образом включить данный обработчик для конкретного инфоблока, поскольку наличие механизма, отдающего всё и вся по HTTP-запросу, явно не идет на пользу безопасности.

Включаем обработчик

В файле local/php_interface/init.php пишем:

\TAO::setOption('infoblock.cats.elements.ajax');

Теперь список котов будет отдаваться по AJAX-запросу.

Отображаем список с подгрузкой по нажатию кнопки (ссылки)

На произвольной странице пишем код вывода списка аналогично обычному, только с параметром list_mode=ajax

print \TAO::infoblock('cats')->render(array(
    'list_mode' => 'ajax',
    'per_page' => 5,
    'pager_var' => 'page',
));

Хоть у нас и нет постраничной навигации, параметры per_page и pager_var все равно нужны, т.к. разбиение на страницы все равно присутствует.

Внизу под списком мы увидим ссылку "Показать еще", при нажатии на которую происходит подгрузка следующей страницы. Если список загружен до конца, то ссылки не будет. Изменить текст ссылки можно параметром button_text:

print \TAO::infoblock('cats')->render(array(
    'list_mode' => 'ajax',
    'per_page' => 5,
    'pager_var' => 'page',
    'button_text' => 'Дай еще порцию!',
));

Автоматическая подгрузка

Теперь мы хотим, чтобы следующая страница подгружалась не кнопкой, а автоматически при скроллировании к концу списка. Для этого нужно всего лишь добавить параметр ajax_mode=auto:

print \TAO::infoblock('cats')->render(array(
    'list_mode' => 'ajax',
    'per_page' => 5,
    'pager_var' => 'page',
    'ajax_mode' => 'auto',
));

JS-обработчик

Часто требуется после подгрузки выполнить какой-нибудь JS-код. Например повесить обработчики событий или запустить jQuery-плагин. Для этого создадим функцию:

function onLoadCats()
{
    alert('Поздавляем! Коты наконец подгрузились!');
}

и укажем ее в параметре on_load:

print \TAO::infoblock('cats')->render(array(
    'list_mode' => 'ajax',
    'per_page' => 5,
    'pager_var' => 'page',
    'on_load' => 'onLoadCats',
));

Индикатор подгрузки

В случае если подгрузка присходит не мгновенно может потребоваться отобразить какие-нибудь часики или колесики пока происходит ожидание. Специально для этого в момент начала подгрузки под списком появляется div (по умолчанию пустой и потому незаметный) с CSS-классами tao-ajax-elements-loader и infoblock-#code#-elements-loader. В нашем случае такой:

<div class="tao-ajax-elements-loader infoblock-cats-elements-loader"></div>

Средствами CSS его можно превратить в часики-колесики и пр. После подгрузки он исчезает. Если используется подгрузка по кнопке, то перед появлением индикатора кнопка пропадает.

Суровая кастомизация

Если вышеописанного не хватает, то можно переопределять файлы:

  • views/list-ajax.phtml - контейнер подгружаемого контента.
  • views/list-ajax-inner.phtml - сам контент
  • views/list-ajax-button.phtml - ссылка-кнопка
  • views/list-ajax-auto.phtml - невидимый маркер, позиция которого проверяется для автоматической подгрузки
  • scripts/elements-ajax.js - JS, который управляет всем этим хозяйством
⚠️ **GitHub.com Fallback** ⚠️