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

Ajax подгрузка при прокрутке страницы или так называемый «бесконечный скроллинг» — это способ автоматической подгрузки контента в момент, когда пользователь достигает конца списка.

Чтобы реализовать данный функционал, нам понадобится кастомизированный шаблон компонента постраничной навигации и несколько строк js-кода.

Итак, для начала копируем шаблон постранички, в компонент system.pagenavigation и переключаемся на этот шаблон в компоненте, который выводит контент. Пример над компонентом news.list.

Теперь готовим наш news.list для работы с ajax-ом. Если у вас используется файл result_modifier.php, то лучше вставляйте этот код туда. Если же такого файла нет, то вставляйте код в самое начало файла template.php.

if(array_key_exists("IS_AJAX", $_REQUEST) && $_REQUEST["IS_AJAX"] == "Y")
{
    	$APPLICATION->RestartBuffer();
}

Этот код сбросит буфер страницы при обращении через ajax. Это нужно для того, чтобы при ajax-запросе мы не получили часть страницы выше нашего компонента (шапку сайта и так далее).

Так же в самый конец файла component_epilog.php вставляйте следующий код (если такого файла нет, то вставляйте в самый низ файла template.php).

if(array_key_exists("IS_AJAX", $_REQUEST) && $_REQUEST["IS_AJAX"] == "Y")
{
    	die();
}

Этот код прекратит выполнение, если идёт ajax-запрос.

То есть, при ajax-запросе мы получим только кусок контента, на который ссылается наша кнопка постраничной навигации (без шапки и футера).

Остаётся только закинуть вот такой js-скрипт в ваш файл скриптов.

$(function() {
    var load_more = false;

    $(window).scroll(function() {
        if($("#ajax_next_page").length && !load_more) {
            var url = $("#ajax_next_page").attr("href");
            var offset_button = $("#ajax_next_page").offset();
            if($(this).scrollTop() >= offset_button.top - $(window).height()) {
                load_more = true;
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {IS_AJAX: 'Y'},
                    success: function(data) {
                        $("#ajax_next_page").after(data);
                        $("#ajax_next_page").remove();
                        load_more = false;
                    }
                });
            }
        }
    });
});

При прокрутке (скроллинге) страницы, если мы достигли нашей кнопки постраничной навигации, выполняется ajax-запрос на URL кнопки. Полученный контент вставляется после кнопки, а затем кнопка удаляется.

Если же нужно подгружать контент при клике на кнопку, то используйте вот этот скрипт:

$(function() {
    var load_more = false;

    $(document).on("click", "#ajax_next_page", function(e) {
        e.preventDefault();
        if(load_more)
            return false;
        var ajax_url = $(this).attr("href");
        load_more = true;
        $.ajax({
            url: ajax_url,
            type: "POST",
            data: {IS_AJAX: 'Y'},
            success: function(data) {
                $("#ajax_next_page").after(data);
            	$("#ajax_next_page").remove();
            	load_more = false;
            }
        });
    });
});