gastor-git
3/20/2017 - 8:25 PM

AJAX подгрузка элементов в шаблонах news.list catalog.section (Bitrix)

AJAX подгрузка элементов в шаблонах news.list catalog.section (Bitrix)

template.php
content_copyfile_download
<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) {
    die();
}

$this->setFrameMode(true);

if ($_REQUEST['ajax_get_page'] == 'Y') {
    $APPLICATION->RestartBuffer();
}
?>
<div class="js-container">
    <div class="js-container-item">
        <? foreach ($arResult['ITEMS'] as $arItem): ?>
            <?
            $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
            $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
            ?>
            <div class="js-item" id="<? echo $this->GetEditAreaId($arItem['ID']); ?>">
                ...
            </div>
        <? endforeach; ?>
    </div>
</div>
<? if ($arParams["DISPLAY_BOTTOM_PAGER"] && !empty($arResult["NAV_STRING"])): ?>
    <div class="js-pagination">
        <input type="hidden" class="js-number-page" value="<?=$arResult['NAV_RESULT']->NavPageNomer;?>" />
        <input type="hidden" class="js-count-page" value="<?=$arResult['NAV_RESULT']->NavPageCount;?>" />
        <input type="hidden" class="js-nav-num" value="<?=$arResult['NAV_RESULT']->NavNum;?>" />
        <? if ($arResult['NAV_RESULT']->NavPageNomer != $arResult['NAV_RESULT']->NavPageCount): ?>
            <a class="js-show-more" href="javascript:void(0);"><span>Показать больше</span></a>
        <? endif; ?>
    </div>
<? endif; ?>
<p class='howshown'>Показано <span><?=count($arResult['ITEMS']);?></span> из <?=$arResult['NAV_RESULT']->NavRecordCount;?> элементов</p> 
<?
if ($_REQUEST['ajax_get_page'] == 'Y') {
    require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");
}
script.js
content_copyfile_download
$(function() {
    $('.js-show-more').on('click', function() {
        var numberPageSelector = '.js-number-page';
        var countPageSelector = '.js-count-page';
        var navNumSelector = '.js-nav-num';
        var containerItemSelector = '.js-container-item';
        var containerPaginationSelector = '.js-pagination';
        var loaderSelector = '.global_overflow';

        var numberPage = parseInt($(numberPageSelector).val()) + 1;
        var countPage = parseInt($(countPageSelector).val());
        var navNum = parseInt($(navNumSelector).val());
        var data = 'PAGEN_' + navNum + '=' + numberPage + '&ajax_get_page=Y';

        $(loaderSelector).show();
        var successCallback = function (html) {
            $(loaderSelector).hide();
            // Append items
            var items = $(html).find(containerItemSelector).html();
            $(containerItemSelector).append(items);
            // Replace pagination
            var pagination = $(html).find(containerPaginationSelector).html();
            $(containerPaginationSelector).html(pagination);
            // If last page hide button show more
            if (numberPage == countPage) {
                $('.js-show-more').hide();
            }
            if ($('.howshown').length > 0) {
                $('.howshown span').text($('.js-container-item .js-item').length);
            }
        }

        $.ajax({
            type: 'GET',
            url: window.location.href,
            data: data,
            success: successCallback
        });

        return false;
    });
});
info.md
content_copyfile_download
  • Rendered
  • Source

AJAX пагинация в шаблонах компонентов news.list, catalog.section

Общий принцип сводится к следующему: при клике на "Показать ещё" мы посылаем на сервер запрос с параметрами такими же, как и обычная AJAX пагинация у компонента. Результат запроса мы не заменяем на существующий блок, а добавляем в него.

  1. В вызове компонента прописываем AJAX_MODE=>Y. При этом битрикс обрамляет блок компонента в div с айди компонента
  2. В шаблоне компонента генерируем такой же айди:
  $bxajaxid = CAjax::GetComponentID($component->__name, $component->__template->__name);
  1. В шаблоне отрисовываем кнопку "Показать ещё". Передаем в неё необходимые параметры:
  <? if($arResult["NAV_RESULT"]->nEndPage > 1 && $arResult["NAV_RESULT"]->NavPageNomer<$arResult["NAV_RESULT"]->nEndPage): ?>
    <div id="btn_<? =$bxajaxid ?>">
        <a data-ajax-id="<?=$bxajaxid?>" href="javascript:void(0)" data-show-more="<?=$arResult["NAV_RESULT"]->NavNum?>" data-next-page="<?=($arResult["NAV_RESULT"]->NavPageNomer + 1)?>" data-max-page="<? =$arResult["NAV_RESULT"]->nEndPage ?>">Показать еще комментарии</a>
    </div>
  <?endif?>
  1. Обрабатываем клик по кнопке, при этом сама кнопка удаляется:
     $(document).on('click', '[data-show-more]', function(){
        var btn = $(this);
        var page = btn.attr('data-next-page');
        var id = btn.attr('data-show-more');
        var bx_ajax_id = btn.attr('data-ajax-id');
        var block_id = "#comp_"+bx_ajax_id;
        
        var data = {
            bxajaxid:bx_ajax_id
        };
        data['PAGEN_'+id] = page;

        $.ajax({
                type: "GET",
                url: window.location.href,
                data: data,
                timeout: 3000,
                success: function(data) {
                        $("#btn_"+bx_ajax_id).remove();
                $(block_id).append(data);
                }
        });
    });
  1. В шаблоне прячем некоторые элементы, которые не нужны в ответе на запрос "Показать ещё":
    <? if(!$_GET["bxajaxid"]):?>
        {{something}}
    <? endif ?>