Jscroll doesn't seems to work on Laravel 5.4
mkantautas opened this issue · comments
Hello, Jscroll doesn't seem to work for some reason. I've followed this tutorial -> https://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll
But the scrolling just doesn't give any effect - I only seem the only one, first loaded item that is loaded when the page loads.
There are no errors in the console.
controller:
public function photo()
{
$photos = Photo::where('user_id', Auth::user()->id)
->paginate(1);
return view('reports/photo')->with('photos',$photos);
}
view:
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="infinite-scroll">
@foreach($photos as $photo)
<h4 class="media-heading">{{ $photo->photo_link }}
<small>{{ $photo->created_at->diffForHumans() }}</small>
</h4>
{{ $photo->photo_at }}
<hr>
@endforeach
{{ $photos->links() }}
</div>
</div>
</div>
</div>
at the same file bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/bootstrap.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: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>