Laravel 7 Load More Data On Infinite Page Scroll

Load more data on Infinite page scroll in laravel. Here you will learn how to implement load more data in laravel on page scroll.

Suppose, you develop a blog post app in laravel and you want to display all blog posts when the user scrolls page. This tutorial guide to you step by step to implement load more data on infinity page scroll in laravel apps using jQuery ajax.

Laravel Load More Data On Page Scroll Example

Follow the following steps and implement load more data on infinity page scroll in laravel apps using jQuery ajax:

Download Laravel Fresh Setup
Configure .env file
Create One Model and Migration
Create Route
Generate Controller by Command
Create Blade View
Run Development Server

Step 1: Download Laravel Fresh Setup

In this step, Use the following command to download laravel fresh setup:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Configure .env file

Next, Open your project root directory, find .env file and setup database credential as follow:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

Step 3: Create Model and Migration

In this step, Create one model and migration name Post. Use the following command and create it:

php artisan make:model Post -m

In this command -m is created the migration file

Next, go to app/database/migrations and open posts migration file and add following fields:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

After that, run the following command:

php artisan migrate

This command will create tables in your database.

Step 4: Create Route

Next, open your “routes/web.php” file and add the following route into web.php file:

 Route::get('posts', 'PostController@index');

Step 5: Generate Controller by Command

Use the following command to generate controller:

php artisan make:controller PostController

Next, go to app/http/controller/PostController and open PostController in any editor. And update the following code into your PostController file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Post;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::paginate(8);
        $data = '';
        if ($request->ajax()) {
            foreach ($posts as $post) {
                $data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';
            }
            return $data;
        }
        return view('posts');
    }
}

Step 6: Create a blade view

In this step, Create one blade file name posts.blade.php. And update the below HTML code into your posts.blade.php file:

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel load more page scroll - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
   .wrapper > ul#results li {
     margin-bottom: 2px;
     background: #e2e2e2;
     padding: 20px;
     width: 97%;
     list-style: none;
   }
   .ajax-loading{
     text-align: center;
   }
</style>
</head>
 
<body>
 
  <div class="container">
   <div class="wrapper">
    <ul id="results"><!-- results appear here --></ul>
     <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
   </div>
  </div>
</body>
</html>

This blade view file displays your all blog posts when you scroll the page down.

Next, update the following script into your blade view file:

<script>
   var SITEURL = "{{ url('/') }}";
   var page = 1; //track user scroll as page number, right now page number is 1
   load_more(page); //initial content load
   $(window).scroll(function() { //detect page scroll
      if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
      page++; //page number increment
      load_more(page); //load content   
      }
    });     
    function load_more(page){
        $.ajax({
           url: SITEURL + "posts?page=" + page,
           type: "get",
           datatype: "html",
           beforeSend: function()
           {
              $('.ajax-loading').show();
            }
        })
        .done(function(data)
        {
            if(data.length == 0){
            console.log(data.length);
            //notify user if nothing to load
            $('.ajax-loading').html("No more records!");
            return;
          }
          $('.ajax-loading').hide(); //hide loading animation once data is received
          $("#results").append(data); //append data into #results element          
           console.log('data.length');
       })
       .fail(function(jqXHR, ajaxOptions, thrownError)
       {
          alert('No response from server');
       });
    }
</script>

Step 7: Run Development Server

In this step, use the following php artisan serve command to start your server locally:

php artisan serve

Now we are ready to run our example so run bellow command to quick run.

http://127.0.0.1:8000/posts

Conclusion

In this laravel ajax infinity load more on page scroll example tutorial, you have learned how to implement ajax load more data on page scroll in laravel apps.