Ajax особенно востребован для загрузки элементов в различные списки. К примеру, в список новостей. Отсутствие необходимости полной перезагрузки страницы выгодно отличает ajax от постраничной навигации через ссылки.
Загрузка контента ajax'ом считается признаком хорошего тона. Пользователю психологически легче воспользоваться интерактивной загрузкой контента, нежели смотреть на мигающую страницу браузера.
Загрузка новостей ajax'ом на bitrix
Рассмотрим способ загрузки новостей, при котором внизу списка находится кнопка "загрузить ещё новости". Пользователь нажимает на эту кнопку, и в конец списка будут добавляться новые элементы.
Программный код будет состоять из стандартного компонента списка новостей. И небольшого скрипта загрузки на JQuery. Для наглядности вся логика будет происходить в двух файлах:
- Страница сайта со списком новостей, которую загружает пользователь при переходе на страницу. К примеру /news/index.php
- Файл, который выводит только компонент списка новостей bitrix:news.list. В этом файле не будет подключаться шаблон сайта. Файл будет лежать по адресу: /_ajax/more_news.php
Ajax загрузка новостей в битрикс строится на логике стандартной пагинации. Если странице с компонентом bitrix:news.list передаётся GET['PAGEN_1'] = 2, то в списке новостей будет загружена страница 2.
Рассмотрим первый файл /news/index.php. В нём выводится шаблон сайта (хидер и футер), компонент bitrix:news.list и кнопка загрузки дополнительных элементов. Выглядит файл примерно так:
<?require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');?>
<div class="ajax_news">
<?$APPLICATION->IncludeComponent('bitrix:news.list','news', Array(...) );?>
</div>
<span onmousedown="loadMoreNews();">Загрузить новости</span>
<script>var newsPagen = 2;
function loadMoreNews(){$.ajax({
url: '/_ajax/more_news.php?PAGEN_1=' + newsPagen,
success: function(data){$('.ajax_news').append(data);
newsPagen++;}
});
}
</script>
<?require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php');
Теперь необходимо разобраться со вторым файлом /_ajax/more_news.php. В этом файле нет необходимости подключать шаблон сайта (хидер и футер). Поэтому его содержание будет тривиальным:
<?
require_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php');
$APPLICATION->IncludeComponent('bitrix:news.list','news', Array(...) );
Вот и всё описание загрузки новостей ajax'ом в битрикс.
Сложная вёрстка
Зачастую в шаблоне компонента используется сложная вёрстка. При которой просто не получится добавить новости через
$('.ajax_news').append(data);
Приходится запрещать компоненту выводить некоторые детали вёрстки, чтобы получаемый список красиво добавился к существующему. Для этого передайте компоненту параметр, который будет отключать часть вёрстки. К примеру:
$APPLICATION->IncludeComponent('bitrix:news.list','news', Array(
'LOAD_AJAX' => 'Y',
...
) );
А внутри шаблона компонента поставьте условие на вывод обрамления компонента:
<?if($arParams['LOAD_AJAX']!='Y'){?>
<div> - обрамление
<?}?>
// внутренняя часть списка новостей
<?if($arParams['LOAD_AJAX']!='Y'){?>
</div> - обрамление
<?}?>
Спасибо большое за статью, очень помогла. Только не могу победить адаптивную "сложную верстку". У нас блоки с новостями располагаются по 3 в линию, left для каждого блока рассчитывается динамически. И для страниц, подгружаемых apend, блоки идут вертикально, без расчета параметра left. Пробовала играть с тегами div, но без толку. Не подскажете, в чем может быть дело?
Огромное спасибо! Жаль что Ваша статья попалась мне не с первого раза) Все заработало сразу!