DNAngel's avatar

Infinite Scroll Repeated the Last Result

When I dd($allStatuses), it gave 9 items. My pagination is 3 items per page. When I scrolled my homepage to the bottom, it repeated the last 3 items once.

I tried ?page=4, and it resulted none. When I tried ?page=3 and scrolled down, it repeated the same items in ?page=3 once.

<script>

    $(document).ready(function() {

        $(window).scroll(fetchPosts);

        function fetchPosts() {
            var page = $('.endless-pagination').data('next-page');
            if(page !== null) {

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

                $.data(this, "scrollCheck", setTimeout(function() {
                    var scroll_position_for_posts_load = $(window).height() + $(window).scrollTop() + 100;

                    if(scroll_position_for_posts_load >= $(document).height()) {
                        $.get(page, function(data) {
                            $('.allStatuses').append(data.allStatuses);
                            $('.endless-pagination').data('next-page', data.next_page);
                        });
                    }
                }, 350));
            }
        }
    });
</script>
0 likes
4 replies
jlrdw's avatar

Have you tested your pagination without ajax to ensure you query is correct?

DNAngel's avatar

@jlrdw ,Yes, it is correct. There are only 9 items showing without ajax. When I went to ?page=2, it sometimes duplicated the last 3 items after scrolling to the the bottom. It might have something to do with the closing condition.

DNAngel's avatar

@david001 HomeController.php

class HomeController extends Controller {

    public function index(Request $request) {

        if(Auth::check()) {

            $statuses = Status::NotReply()->NotFriendPostUserProfile()->where(function($query) {
                return $query->where('user_id', Auth::user()->id)
                            ->orWhereIn('user_id', Auth::user()->friends()->lists('id'));
            });

            $friendPosts = Status::NotReply()->FriendPostUserProfile()->where(function($query) {
                return $query->where('user_id', Auth::user()->id)
                            ->orWhereIn('user_id', Auth::user()->friends()->lists('id'));
            });

            $collection = collect($statuses->get());
            $allStatuses = $collection->merge($friendPosts->get())->sortByDesc('updated_at');

            $allStatuses = PaginateController::paginateClients($allStatuses);

            if($request->ajax()) {

                return [
                    'allStatuses' => view('timeline.ajax.index')->with('allStatuses', $allStatuses)->render(),
                    'next_page' => $allStatuses->nextPageUrl()
                ];
            }

            return view('timeline.index')->with('allStatuses', $allStatuses);
        }

        return view('home');
    }
}

Route.php

Route::get('/', [
    'uses' => '\App\Http\Controllers\HomeController@index',
    'as' => 'home',
]);

Route::get('/ajax', [
    'uses' => '\App\Http\Controllers\HomeController@index'
]);

Please or to participate in this conversation.