How to complete ajax loading of news?

Question

JavaScript

There is IB news. I take out 4 pieces. You need to upload it when you click on the Load more button. I don't understand why it doesn't work. Maybe someone will tell you.
I call the component in 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>

The template.php file of the news.list component

<?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; ?>

well, a function in 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();
        })
    }

}

Answer 1

Found the error myself. The problem was in the wrong sequence of calling scripts.
The ZhiQuery call and the script were moved to head.