Laravel 5.4 + jScroll.js not working

Question

I'm trying to implement an infinite scrolling based on this tutorial .

Couldn't be simpler, right? well... It's not working. This is my code here:

In the route file (I didn't put it in a controller because was a simple test)

Route::get('/', function(){

$articles = \App\Article::paginate(1);

return view('home')->with('articles', $articles);

});

In home.blade.php

<div class="infinite-scroll">
@foreach($articles as $article)
    <article class="post">
        <header>
            <div class="title">
                <h2>{{ $article->title }}</h2>
            </div>
        </header>
    </article>
@endforeach
</div>

{{ $articles->links() }}

At the bottom of that same file

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

There's absolutely nothing in the console. Like nothing is happening.

I'm missing something, but I don't know what. Do you see something wrong? Thanks!

Ps. I also changed contentSelector: '.infinite-scroll' to contentSelector: 'div.infinite-scroll', . But nothing.

Answer 1

Your pagination is outside the infinite-scroll .

Try

<div class="infinite-scroll">
@foreach($articles as $article)
    <article class="post">
        <header>
            <div class="title">
                <h2>{{ $article->title }}</h2>
            </div>
        </header>
    </article>
@endforeach
{{ $articles->links() }}
</div>

Answer 2

Try like this:

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


        });   
    });
</script>