infinite scroll laravel and ajax

Question

there is a reference for me to create an infinite scroll with laravel blade and ajax to request api and switch pages.I've tried to directly call with the database I can do it but when I call the api I don't get the logic

Answer 1

The logic is: once the page scrolled to a specific height The page call an ajax request to call the next data and append it with jquery or javascript.

Let's assume that we have a page consists of many posts and you want to preform the infinite scroll on it.

First in the Index function, Check the Comments:-

  public function Index(Request $request)
    {
    
    // First we Call all our posts , which will be the first data to be shown in the page before scroll .
        $posts = Post::paginate(12); 
    
// Then we're checking , if this request an ajax-request , return a response  contains the post component to be rendered during the scroll 
 
        if ($request->ajax()) {
            $view = view('data',compact('posts'))->render();
            return response()->json(['html'=>$view]);
        }
    
    
        return view('my-post',compact('posts'));
    }

Let's Assume that's My Posts Blade:-

<!DOCTYPE html>
<html>
<head>
    <title>Laravel infinite scroll pagination</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
        .ajax-load{
            background: #e1e1e1;
            padding: 10px 0px;
            width: 100%;
        }
    </style>
</head>
<body>


<div class="container">
    <h2 class="text-center">Laravel infinite scroll pagination</h2>
    <br/>
    <div class="col-md-12" id="post-data">
        @include('data')
    </div>
</div>


<div class="ajax-load text-center" style="display:none">
    <p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
</div>


<script type="text/javascript">
    var page = 1;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            page++;
            loadMoreData(page);
        }
    });


    function loadMoreData(page){
      $.ajax(
            {
                url: '?page=' + page,
                type: "get",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .done(function(data)
            {
                if(data.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                $('.ajax-load').hide();
                $("#post-data").append(data.html);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('server not responding...');
            });
    }
</script>


</body>
</html>

And This will be the rendered component during scroll:-

@foreach($posts as $post)
<div>
    <h3><a href="">{{ $post->title }}</a></h3>
    <p>{{ str_limit($post->description, 400) }}</p>


    <div class="text-right">
        <button class="btn btn-success">Read More</button>
    </div>


    <hr style="margin-top:5px;">
</div>
@endforeach

That's it

infinite scroll laravel and ajax

Question

1 answers

solution1
0 2022-09-03 21:10:03

infinite scroll laravel and ajax

Question

1 answers

solution1 0 2022-09-03 21:10:03

solution1
0 2022-09-03 21:10:03