title: Laravel load more data on scroll with Jquery and AJAX
body: <p>This is my code here</p>
  
  <pre><code>&lt;script&gt;
    $(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_post_load = $(window).height() + $(window).scrollTop + 100;
  
            if(scroll_position_for_post_load &gt;= $(document).height(){
  
              $.get(page, function(data){
  
                $('.posts').append(data.posts);
  
  
                $('.endless-pagination').data('next-page', data.next_page);
  
              });
  
            }
  
          }, 350))
  
        }
  
      }
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I replaced the IF condition</p>
  
  <pre><code>scroll_position_for_post_load &gt;= $(document)height()
  </code></pre>
  
  <p>with</p>
  
  <pre><code>1 == 1
  </code></pre>
  
  <p>This worked, but the page loads continuously without the user scrolling.</p>
  
  <p>This is the code in my PagesController
  Variable page was declared at the top</p>
  
  <pre><code>public function index(Request $request){
  
      $posts = Post::orderBy('created_at', 'desc')-&gt;paginate($this-&gt;paginate_posts);
  
      if ($request-&gt;ajax()) {
  
          return [
              'posts' =&gt; view('pages.ajax.index')-&gt;with(compact('posts'))-&gt;render(),
              'next_page' =&gt; $posts-&gt;nextPageUrl()
          ];
  
      }
  
      return view('pages.index')-&gt;with(compact('posts'));
  
  }
  </code></pre>
  
  <p>And on my index.blade.php page i have</p>
  
  <pre><code>    @forelse ($posts as $post)
  
      {{--  Post and replies attached  --}}
      &lt;div class="media stream"&gt;
          &lt;a href="{{route('profile')}}" class="media-avatar medium pull-left"&gt;
              &lt;img src="{{asset('images/user.png')}}"&gt;
          &lt;/a&gt;
          &lt;div class="media-body"&gt;
              &lt;div class="stream-headline"&gt;
                  &lt;h5 class="stream-author"&gt;
                      &lt;a href="http://localhost/blog/public/question/{{$post-&gt;slug}}" class="center"&gt;{{ $post-&gt;title }}&lt;/a&gt;
                  &lt;/h5&gt;
  
                  &lt;h5 class="stream-author"&gt;
                      &lt;a href="{{route('profile')}}" style="text-decoration:none;color:initial"&gt;{{ $post-&gt;user-&gt;name }}&lt;/a&gt;
                      &lt;small&gt; {{ date('F d, Y', strtotime($post-&gt;created_at)) }} at {{ date('h:i A', strtotime($post-&gt;created_at)) }} &lt;/small&gt;
                  &lt;/h5&gt;
  
                  &lt;div class="stream-text"&gt;
                      {{ $post-&gt;body }}
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.stream-headline--&gt;
  
              &lt;div class="stream-options"&gt;
                  &lt;a href="#" class="btn btn-small"&gt;
                      &lt;i class="icon-thumbs-up shaded"&gt;&lt;/i&gt;
                      Like
                  &lt;/a&gt;
                  &lt;a href="http://localhost/blog/public/question/{{$post-&gt;slug}}" class="btn btn-small"&gt;
                      &lt;i class="icon-reply shaded"&gt;&lt;/i&gt;
                      Reply
                  &lt;/a&gt;
                  &lt;a href="#" class="btn btn-small"&gt;
                      &lt;i class="icon-retweet shaded"&gt;&lt;/i&gt;
                      Repost
                  &lt;/a&gt;
                  &lt;span class="stream"&gt; {{$post-&gt;replies-&gt;count()}} comment (s) &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;{{--  media body  --}}
      &lt;/div&gt;&lt;!--/.media .stream--&gt;
  
  @empty
  
      &lt;div class="media stream"&gt;
          &lt;div class="media-body"&gt;
              &lt;div class="stream-headline"&gt;
                  &lt;div class="stream-text"&gt;
                      All clean. No posts found!!
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.stream-headline--&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--/.media .stream--&gt;
  
  @endforelse
  </code></pre>
  
  <p>On pages.ajax.index i have</p>
  
  <pre><code>    @forelse ($posts as $post)
  
      {{--  Post and replies attached  --}}
      &lt;div class="media stream"&gt;
          &lt;a href="{{route('profile')}}" class="media-avatar medium pull-left"&gt;
              &lt;img src="{{asset('images/user.png')}}"&gt;
          &lt;/a&gt;
          &lt;div class="media-body"&gt;
              &lt;div class="stream-headline"&gt;
                  &lt;h5 class="stream-author"&gt;
                      &lt;a href="http://localhost/blog/public/question/{{$post-&gt;slug}}" class="center"&gt;{{ $post-&gt;title }}&lt;/a&gt;
                  &lt;/h5&gt;
  
                  &lt;h5 class="stream-author"&gt;
                      &lt;a href="{{route('profile')}}" style="text-decoration:none;color:initial"&gt;{{ $post-&gt;user-&gt;name }}&lt;/a&gt;
                      &lt;small&gt; {{ date('F d, Y', strtotime($post-&gt;created_at)) }} at {{ date('h:i A', strtotime($post-&gt;created_at)) }} &lt;/small&gt;
                  &lt;/h5&gt;
  
                  &lt;div class="stream-text"&gt;
                      {{ $post-&gt;body }}
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.stream-headline--&gt;
  
              &lt;div class="stream-options"&gt;
                  &lt;a href="#" class="btn btn-small"&gt;
                      &lt;i class="icon-thumbs-up shaded"&gt;&lt;/i&gt;
                      Like
                  &lt;/a&gt;
                  &lt;a href="http://localhost/blog/public/question/{{$post-&gt;slug}}" class="btn btn-small"&gt;
                      &lt;i class="icon-reply shaded"&gt;&lt;/i&gt;
                      Reply
                  &lt;/a&gt;
                  &lt;a href="#" class="btn btn-small"&gt;
                      &lt;i class="icon-retweet shaded"&gt;&lt;/i&gt;
                      Repost
                  &lt;/a&gt;
                  &lt;span class="stream"&gt; {{$post-&gt;replies-&gt;count()}} comment (s) &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;{{--  media body  --}}
      &lt;/div&gt;&lt;!--/.media .stream--&gt;
  
  @empty
  
      &lt;div class="media stream"&gt;
          &lt;div class="media-body"&gt;
              &lt;div class="stream-headline"&gt;
                  &lt;div class="stream-text"&gt;
                      All clean. No posts found!!
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.stream-headline--&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--/.media .stream--&gt;
  
  @endforelse
  </code></pre>
  
  <p>Is there any error in the code i can't see?</p>