Laravel: Load more data from controller into view

Question

i would like to ask how can i display more data by using js or ajax and call Controller displaying the result into my view. Until now i 'm displaying 8 posts with limit(8) for the first time. Then i 'm using ajax to call the controller and bring each time more 8 posts. The problem i 'm facing is that the posts are the same each time i call the controller or the ajax. This is my

PostsController

class PostsController extends Controller {
    public function index(Request $request)
    {
        $posts = Post::orderBy('created_at', 'desc')->limit(4)->get();
        $categories = Category::all();

       if ($request->ajax()) {
           $view = view('posts.load', compact('posts', 'categories'))->render();
           return response()->json(['html'=>$view]);
       }

        return view('posts.display', compact('categories', 'posts'));
    }
}

The controller is called by web, route

Route::get('/posts', 'PostsController@index');

I call the foreach method into my posts.display

    <div class="col-md-8 col-md-offset-2" id="grid" style="padding-top: 40px;">
    @foreach($posts as $post)
        @if(strlen($post->body) < "701")
            <div class="item">
                <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                    <span class="time">{{$post->created_at}}</span>  
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("link")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("mail")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("pin")}}
                        </span>
                    </a>
                </div>
                <div class="tr-text">
                    <div class="col-md-12 td-text">
                        <p><a>{{$post->body}}</a></p>
                    </div>
                </div>
                <div class="tr-tag">
                    <div style="padding: 1px 0 1px 0; text-align: center">
                        {{Emoji::findByName("tag")}}Tag: 
                            @foreach($categories as $category)
                                @if($category->id == $post->category_un)
                                    <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                                @endif
                                @if($category->id == $post->category_fac)
                                    <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                                @endif
                            @endforeach
                    </div>
                </div>
                <div class="tr-options">
                    <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
                </div>
            </div>
        @elseif(strlen($post->body) > "700")
            <div class="item">
                <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                    <span class="time">{{$post->created_at}}</span>  
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("link")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("mail")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("pin")}}
                        </span>
                    </a>
                </div>
                <div class="tr-text">
                    <div class="col-md-12 td-text">
                        <p class="more"><a>{{$post->body}}</a></p>
                        <?php // echo strlen($post->body);?>
                        <!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
                    </div>
                </div>
                <div class="tr-tag">
                    <div style="padding: 1px 0 1px 0; text-align: center">
                        {{Emoji::findByName("tag")}}Tag: 
                            @foreach($categories as $category)
                                @if($category->id == $post->category_un)
                                    <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                                @endif
                                @if($category->id == $post->category_fac)
                                    <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                                @endif
                            @endforeach
                    </div>
                </div>
                <div class="tr-options">
                    <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
                </div>
            </div>
        @endif
    @endforeach
</div>
<div class="ajax-load text-center" style="display:none">
    <p><img src=""></p>
</div>

In the end i 'm using ajax, into the footer, that calls the controller via url and get the data with the same limitation

<script type="text/javascript">
$(window).scroll(function() {
    var flag = 0;
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        $.ajax(
        {
            url: '/posts',
            type: 'get',
            /*beforeSend: function()
            {
                $('.ajax-load').show();
            }*/
            data: {
                'offset': flag,
                'limit': 8
            },
            success: function(data){
                $('.ajax-load').hide();
                $("#grid").append(data.html);
                flag += 8;
            }
        })
    }
});

function loadMoreData(){
  $.ajax(
        {
            url: '/posts',
            type: 'get',
            /*beforeSend: function()
            {
                $('.ajax-load').show();
            }*/
            data: {
                'offset': 0,
                'limit': 8
            }
        })
        .done(function(data)
        {
            if(data.html == " "){
                $('.ajax-load').html("No more records found");
                return;
            }

            $('.ajax-load').hide();
            $("#grid").append(data.html);
            flag += 8;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('server not responding...');
        });
}

All the data are displayed by the ajax into a copy of posts.display code at posts.load

 @foreach($posts as $post)
    @if(strlen($post->body) < "701")
        <div class="item">
            <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                <span class="time">{{$post->created_at}}</span>  
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("link")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("mail")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("pin")}}
                    </span>
                </a>
            </div>
            <div class="tr-text">
                <div class="col-md-12 td-text">
                    <p><a>{{$post->body}}</a></p>
                </div>
            </div>
            <div class="tr-tag">
                <div style="padding: 1px 0 1px 0; text-align: center">
                    {{Emoji::findByName("tag")}}Tag: 
                        @foreach($categories as $category)
                            @if($category->id == $post->category_un)
                                <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                            @endif
                            @if($category->id == $post->category_fac)
                                <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                            @endif
                        @endforeach
                </div>
            </div>
            <div class="tr-options">
                <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
            </div>
        </div>
    @elseif(strlen($post->body) > "700")
        <div class="item">
            <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                <span class="time">{{$post->created_at}}</span>  
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("link")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("mail")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("pin")}}
                    </span>
                </a>
            </div>
            <div class="tr-text">
                <div class="col-md-12 td-text">
                    <p class="more"><a>{{$post->body}}</a></p>
                    <?php // echo strlen($post->body);?>
                    <!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
                </div>
            </div>
            <div class="tr-tag">
                <div style="padding: 1px 0 1px 0; text-align: center">
                    {{Emoji::findByName("tag")}}Tag: 
                        @foreach($categories as $category)
                            @if($category->id == $post->category_un)
                                <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                            @endif
                            @if($category->id == $post->category_fac)
                                <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                            @endif
                        @endforeach
                </div>
            </div>
            <div class="tr-options">
                <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
            </div>
        </div>
    @endif
@endforeach

So my question is, why this brings always the same data? Every time i get at the end of the scroll and the ajax call the controller it sticks with the first 8 posts instead the 8 next one. Am i missing something or my code is wrong? Any help will be appreciate it.

Answer 1

With @Shan help, i found the problem.

First i fixed my js in the footer on this one:

<script type="text/javascript">
    var pageNumber = 2;

    $(document).ready(function() {
            $.ajax({
                type : 'GET',
                url: "websiteURL/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
    });

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            $.ajax({
                type : 'GET',
                url: "websiteURL/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
        }
    });

    function loadMoreData(){
            $.ajax({
                type : 'GET',
                url: "http://communitune.com/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                            // :( no more articles
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
    }
</script>

And then i put fixed controller also into

 public function index(Request $request)
    {
        $posts = Post::orderBy('created_at', 'desc')->paginate(8);
        //$posts = Post::orderBy('created_at', 'desc')->limit(8)->get();
        $categories = Category::all();

       if ($request->ajax()) {
           $view = view('posts.load', compact('posts', 'categories'))->render();
           return response()->json(['html'=>$view]);
       }

        return view('posts.display', compact('categories', 'posts'));
    }

The credits goes to @Shan, in the comment who helped me to solve this.