laravel, use of infinite scrolling instead of pagination

Question

I'm using scrolling instead of pagination but my problem is that it still loading even the data already there and no more data found, so the scrolling down will never stop, and I think because I can't set the condition that if reached to the last page then stop loading to check if the json html is empty is difficult because it contains html divs I hope you can help me to reach to the end of content then stop scrolling

          var page = 1;

            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    page++;
                    loadMoreData(page);
                }
            });

            function loadMoreData(page) {
                $.ajax({
                    url: '?page=' + page,
                    type: "get",
                    beforeSend: function() {
                        $('.ajax-load').show();
                    }
                }).done(function(data) {


                    if(page == " ") {
                        $('.ajax-load').html("No more records found");
                        return;
                    }
                    $('.ajax-load').hide();
                    $("#load_data").append(data.html);

                }).fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('server not responding...');
                });
            }


             /*Show Hide Cousines*/
                $('#showcuisine').on('click', function (event) {
                    event.preventDefault();
                    $(".cuisines").show();
                    $("#showcuisine").hide();
                    $("#hidecuisine").show();
                });


                $('#hidecuisine').on('click', function (event) {
                    event.preventDefault();
                    var allcuisines = jQuery('.cuisines');
                    for (var i = 5; i < allcuisines.length; i++) {
                        $('#cuisine' + i).hide();

                    }

                    $("#showcuisine").show();
                    $("#hidecuisine").hide();

                });

Controller

if ($request->ajax()) {
            $view = view('store-search.listing', compact(
                'stores','storedays','cuisines'
        ))->render();

            return response()->json(['html'=>$view]);
        }

Answer 1

When there is no more data to receive you can return null or false instead of view.

Then replace

if(page == " ") {
    $('.ajax-load').html("No more records found");
    return;
}

with:

if(!data) {
    $('.ajax-load').html("No more records found");
    return;
}

You should also include a variable isLastPageLoaded = false and set it to true wen last page is reached. Before making new AJAX request you should check if this is still false. If it's true then you don't need to load new records.

Do I understand correctly that already existing records get duplicated?

Answer 2

check with if condition on api side if zero record fetching then return null.

and then put this on your ajax done function

if(data == null) { $('.ajax-load').html("No more records found"); return; }

Answer 3

Solved, I have to put the foreach in a div with no other html up to the foreach