Question

198

Laravel 5 Paginate + Infinite Scroll jQuery

rated 0 times [ 200] [ 2] / answers: 1 / hits: 20339 / 9 Years ago, mon, october 19, 2015, 12:00:00

I am trying to use paginate() to achieve infinite scroll. I think the easiest way is using the 'infinite-scroll' to achieve this. If you have any other suggestion how to do it without infinite-scroll library, just using jQuery, I'd be happy to know..

I am returning the variable to view like this:

public function index()

 {

    $posts = Post::with('status' == 'verified')

                      ->paginate(30);



    return view ('show')->with(compact('posts'));

 }

My View:

<div id=content class=col-md-10>

    @foreach (array_chunk($posts->all(), 3) as $row)

        <div class=post row>

            @foreach($row as $post)

                <div class=item col-md-4>

                    <!-- SHOW POST -->

                </div>

            @endforeach

        </div>

    @endforeach

    {!! $posts->render() !!}

 </div>

Javascript Part:

$(document).ready(function() {

  (function() {

     var loading_options = {

        finishedMsg: <div class='end-msg'>End of content!</div>,

        msgText: <div class='center'>Loading news items...</div>,

        img: /assets/img/ajax-loader.gif

     };



     $('#content').infinitescroll({

         loading: loading_options,

         navSelector: ul.pagination,

         nextSelector: ul.pagination  li:last a,   // is this where it's failing?

         itemSelector: #content div.item

     });

   });

});

However, this doesn't work. The ->render() part is working because I am getting [<[1]2]3]>] part. However, the infinite scroll doesn't work. I also don't get any errors in the console.

[<[1]2]3]>] is like this in the view:source:

<ul class=pagination>

       <li class=disabled><span>«</span> </li>                    //   «

       <li class=active><span>1</span></li>                       //   1

       <li><a href=http://test.dev/?page=2>2</a></li>             //   2

       <li><a href=http://test.dev/?page=3>3</a></li>             //   3

       <li><a href=http://test.dev/?page=2 rel=next>»</a></li>  //   »

</ul>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradford

Add To Favorites

Follow

Total Points: 709

Total Questions: 117

Total Answers: 91

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 9 Years ago malkajillc · Accepted Answer

You should be able to use the Pagination just fine as long as your call to get new posts is different than page load. So you'd have two Laravel calls:

1.) To provide the template of the page (including jQuery, CSS, and your max_page count variable -- view HTML)
2.) For the AJAX to call posts based on the page you give it.

This is how I got my infinity scroll to work...

HTML:

<!-- Your code hasn't changed-->

<div id=content class=col-md-10>

  @foreach (array_chunk($posts->all(), 3) as $row)

    <div class=post row>

        @foreach($row as $post)

            <div class=item col-md-4>

                <!-- SHOW POST -->

            </div>

        @endforeach

    </div>

  @endforeach

  {!! $posts->render() !!}

</div>



<!-- Holds your page information!! -->

<input type=hidden id=page value=1 />

<input type=hidden id=max_page value=<?php echo $max_page ?> />



<!-- Your End of page message. Hidden by default -->

<div id=end_of_page class=center>

    <hr/>

    <span>You've reached the end of the feed.</span>

</div>

On page load, you will fill in the max_page variable (so do something like this: ceil(Post::with('status' == 'verified')->count() / 30);.

Next, your jQuery:

var outerPane = $('#content'),

didScroll = false;



$(window).scroll(function() { //watches scroll of the window

    didScroll = true;

});



//Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)

setInterval(function() {

    if (didScroll){

       didScroll = false;

       if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){

        pageCountUpdate(); 

    }

   }

}, 250);



//This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message

function pageCountUpdate(){

    var page = parseInt($('#page').val());

    var max_page = parseInt($('#max_page').val());



    if(page < max_page){

       $('#page').val(page+1);

       getPosts();

       $('#end_of_page').hide();

    } else {

      $('#end_of_page').fadeIn();

    }

}





//Ajax call to get your new posts

function getPosts(){

    $.ajax({

        type: POST,

        url: /load, // whatever your URL is

        data: { page: page },

        beforeSend: function(){ //This is your loading message ADD AN ID

            $('#content').append(<div id='loading' class='center'>Loading news items...</div>);

        },

        complete: function(){ //remove the loading message

          $('#loading').remove

        },

        success: function(html) { // success! YAY!! Add HTML to content container

            $('#content').append(html);

        }

     });



} //end of getPosts function

There ya go! That's all. I was using Masonry with this code also so the animation worked wonderfully.