jscroll does not load the new content all the time

[munagurung]

Hello,

I am using jscroll on a search page in a laravel app and it doesn't work all the time. Sometimes jscroll doesn't load the second page, I can see from the telescope that the jscroll has requested for the second page and that the app has returned a valid response. However, jscroll doesn't add the new content in the view and keeps on showing the loading html. I have attached an image of the developer tool's console log when the result does not load in the view.

My jscroll js implementation looks like this.

window.addEventListener('load', initSearch);

function initSearch() {
    searchJScroll();
}

function searchJScroll() {
    const html = '<div class="text-muted align-items-center text-center"><i class="fas fa-2x fa-spinner fa-spin"></i> Loading...</div>';
    const options = {
        debug: true,
        autoTrigger: true,
        loadingHtml: html,
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: '.jScroll',
        pagingSelector: '.pagination',
        callback: function () {
            $('ul.pagination').remove();
        }
    };

    $('.jScroll').jscroll(options);
}

Any insight would be greatly appreciated. Thanks.

[pklauzinski]

Hi @munagurung - It is difficult to be sure without testing your code, but I suspect that because you are removing ul.pagination in your callback parameter, and that selector contains your nextSelector, then the nextSelector is not being found because it has been removed from the DOM.

Try calling $('ul.pagination').hide() instead of .remove() and see if that does the trick.

[munagurung]

Hi @munagurung - It is difficult to be sure without testing your code, but I suspect that because you are removing ul.pagination in your callback parameter, and that selector contains your nextSelector, then the nextSelector is not being found because it has been removed from the DOM.

Try calling $('ul.pagination').hide() instead of .remove() and see if that does the trick.

Hey, thank you for your reply.

I have tried your suggestion but it is still not working. I am thinking that ul.pagination is not the problem because if it is, then the jscroll would output jScroll: nextSelector not found - destroying and the loading HTML would be removed. This does not happen in my case. Any other ideas?
It is very difficult to debug considering it does load the results sometimes but not all other times. :(

[wolfpack4417]

@munagurung I know this is an old post, but for anyone else who finds it later. Laravel has implemented Cursor Pagination which is more efficient for infinite scroll now. https://laravel.com/docs/8.x/pagination#cursor-pagination

If you're still having issues, let me know and I can try to help you debug them. I have infinite scrolling with Laravel's cursor pagination and jscroll working on my app with a complex query and the scroll occurring in an individual div on the page.

@wolfpack4417
i have the same issue

<div class="infinite-scroll" >
// my for loop
@forelse ($posts  as $ite => $post)
...
@empty
@endforelse
{{ $posts->links() }}

</div>

.
.
.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>
<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="logo/favicon.png" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

i am on laravel 8 and if i use cursorPaginate it will through an error :

BadMethodCallException
Call to undefined method Illuminate\Database\Query\Builder::cursorPaginate()


Bad Method Call
Did you mean Illuminate\Database\Query\Builder::simplePaginate() ?