CODEWITHSUNDEEP
javascriptajaxlaravelpagination
Duc Pham
Duc Pham

Reputation: 19

load more data on scroll laravel ajax

i am follow the code on youtube, everything work but when i scroll mouse continuously the last page load duplicate many time, someone may help me fix this error, i am preciate it!

 <div class="product endless-pagination" data-next-page="{{$product->nextPageUrl()}}" data-last-page="{{$product->lastPage()}}">
                @include('user.blocks.d_test')
            </div>

<script type="text/javascript">

    $(document).ready(function () {

        $(window).scroll(fetchPost);

        function fetchPost() {

            var page = $('.endless-pagination').data('next-page');
            //var lastpage=$('.endless-pagination').data('last-page');
            if (page !== null && page.length > 0) {

                $('.loading').show();

                if ($(window).height()+ $(window).scrollTop()+100 >= $(document).height()) {

                    clearTimeout($.data(this, "scrollCheck"));

                        $.data(this, "scrollCheck", setTimeout(function () {

                            $.get(page, function (data) {
                                $('.endless-pagination').data('next-page', data.next_page);
                                $('.loading').hide();
                                $('.product').append(data.product);
                            })

                        }, 350))

                }

            }

        }
    })
</script>

Upvotes: 1

Views: 962

Answers (1)

Abdulmalik Alsufayran
Abdulmalik Alsufayran

Reputation: 11

You should try this tutorial. it works for me and you will not have to re-invent the wheel: https://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

Upvotes: 1

Related Questions