How to download news using ajax?

Question

JavaScript

When I click LOAD MORE, ajxo loads the news. Here is the code

<?$APPLICATION->IncludeComponent(
            "bitrix:news.list",
            "",
            Array(
                "ACTIVE_DATE_FORMAT" => "d.m.Y",
                "ADD_SECTIONS_CHAIN" => "Y",
                "AJAX_MODE" => "Y",
                "AJAX_OPTION_ADDITIONAL" => "",
              ........
            )
        );?>
        <span onmousedown="loadMoreNews();">Загрузить новости</span>
        <script>

            var newsPagen = 2;
            function loadMoreNews(){

                $.ajax({

                    url: 'more_news.php?PAGEN_1=' + newsPagen,
                    success: function(data){

                        $('.content-container').append(data);
                        newsPagen++;

                    }

                });

            }

        </script>
    </div>

The More_news.php file contains the same call to the news.list component.
On the first click on LOAD MORE everything works correctly, but on subsequent clicks it loads the same news again. Tell me how to be.

Answer 1

In the component, $arResult should contain pagination data
$arResult['NAV_RESULT']->NavNum - pagination number (?PAGEN_1= here 1 is the pagination number (there can be several components with pagination on the page))
$arResult['NAV_RESULT' ]->NavPageCount - total pages
Perhaps you have elements on 2 pages
After reaching the last page, you need to hide the button

Answer 2

Check in the inspector which request goes to the server. Also, by a simple GET to the specified URL, the next page should be displayed for you - this also needs to be checked. Another good thing in this case should be that when you click the loader is blocked (not executed synchronously, but blocked by a flag or something else), so that multiple clicks on load do not send many identical requests.