Как доделать ajax подгрузку новостей?

Имеется ИБ новостей. Вывожу по 4 штуки. Нужно подгрузку сделать при нажатии на кнопку Загрузить еще. Не понимаю почему не работает. Может кто что подскажет.
Вызываю компонент в index.php
<div class = "new_list" style="position: relative;">
				 <?if ($_POST['AJAX'] == 'Y') $APPLICATION->RestartBuffer();
				 $APPLICATION->IncludeComponent(
	"bitrix:news", 
	"articles_block", 
	array(
		"ADD_ELEMENT_CHAIN" => "N",
		"ADD_SECTIONS_CHAIN" => "Y",
		"AJAX_MODE" => "N",
		...
		"IBLOCK_ID" => "10",
		"IBLOCK_TYPE" => "simple",
		...
	),
	false
); if ($_POST['AJAX'] == 'Y') die(); ?>
</div>

Файл template.php компонента news.list
<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
if (empty($arResult)) return "";
// номер текущей страницы
$curPage = $arResult["NAV_RESULT"]->NavPageNomer;
// всего страниц - номер последней страницы
$totalPages = $arResult["NAV_RESULT"]->NavPageCount;
// номер постраничной навигации на странице
$navNum = $arResult["NAV_RESULT"]->NavNum;
//всего новостей
$totalNews = $arResult["NAV_RESULT"]->NavRecordCount;
/*еще осталось новостей*/
$rest = $totalNews - $arResult["NAV_RESULT"]->NavPageSize * $curPage;
//выводить на страницу
$onPage = ($rest < $arResult["NAV_RESULT"]->NavPageSize) ? $rest : $arResult["NAV_RESULT"]->NavPageSize;
?>
<? if ($arParams["AJAX"] != "Y"): ?>
	<div class="grid" id="news_container">
		<div class="gutter-width">
		</div>
		<? endif; ?>
		<?foreach ($arResult["ITEMS"] as $value):?>
			<div class="grid-item bl4">
				<a href="/<?=$value["DETAIL_PAGE_URL"]?>"><img class="img_item" src="<?=$value["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$value["PREVIEW_PICTURE"]["ALT"]?>"></a>
				<a href="/<?=$value["DETAIL_PAGE_URL"]?>"><p class="name_item"><?=$value["NAME"]?></p></a>
				<p class="pre_txt_item"><?=$value["PREVIEW_TEXT"]?></p>
			</div>
		<?endforeach;?>
		<? if ($arParams["AJAX"] != "Y"): ?>
	</div>
<? endif; ?>

<? if ($arParams["AJAX"] != "Y" && $curPage < $totalPages): ?>

	<div class="text-center parent_loader mb60">
		<button class="btn-show-more">
			показать еще
		</button>
	</div>
	<script>
		$(function () {
			var newsSetLoader = new newsLoader({
				root: '#news_container',
				newsBlock: '.grid-item',
				newsLoader: '.btn-show-more',
				parentLoader: '.parent_loader',
				cntMore: '.btn-show-more',
				loadSett: {
					endPage: <?= $totalPages ?>,
					navNum: <?= $navNum ?>,
					totalNum: <?= $totalNews ?>,
					curPage: <?= $curPage ?>,
					onPage: <?= $onPage ?>
				}
			});
			newsSetLoader.init();
		});
	</script>
<? else: ?>
	<div class="mb60"></div>
<? endif; ?>

<? if ($arParams["DISPLAY_BOTTOM_PAGER"]): ?>
	<?= $arResult["NAV_STRING"] ?>
<? endif; ?>

ну и функция на JS
function newsLoader(p) {
    console.log('newsLoader init');
    var o = this;
    this.root = $(p.root);
    this.newsBlock = $(p.newsBlock, this.root);
    this.newsLoader = $(p.newsLoader);
    this.ajaxLoader = $(p.ajaxLoader);
    this.parentLoader = $(p.parentLoader);
    this.cntMore = $(p.cntMore);
    this.curPage = p.loadSett.curPage;
    this.loadSett = (p.loadSett);
    this.totalNum = (p.loadSett.totalNum);
    this.endPage = (p.loadSett.endPage);

    // загружаем дополнительные новости
    this.loadMoreNews = function () {
        var loadUrl = location.href;
        if (location.search != '') {
            loadUrl += '&';
        }
        else {
            loadUrl += '?';
        }
        loadUrl += 'PAGEN_5' + '=' + (++o.curPage);
        console.log(loadUrl);

        o.ajaxLoader.show();
        $.ajax({
            url: loadUrl,
            type: "POST",
            data: {
                AJAX: 'Y'
            }
        })
            .done(function (html) {
                // o.root.append(html);
                if (o.curPage >= o.loadSett.endPage)
                    o.cntMore.hide();
                var $content = $(html);
                /*заменяем старую цепочку навигации на новую*/

                $('#news_container').append($content);
                $('#news_container').imagesLoaded().then(function () {
                    $('#news_container').masonry('appended', $content);
                    $('.pagination-wrap:eq(0)').replaceAll($('.pagination-wrap:eq(1)'));
                    $('.pagination-wrap:eq(1)').remove();
                });
            });
    };

    this.init = function () {
        o.newsLoader.click(function (event) {
            $('.loading').show();
            o.loadMoreNews();
            event.preventDefault();
        })
    }

}
  • Вопрос задан
  • 2226 просмотров
Решения вопроса 1
yuraSco
@yuraSco Автор вопроса
Нашел ошибку сам. Проблема была в неправильной последовательности вызова скриптов.
Вызов ЖиКвери и скрипт перенес в head.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы