Hello, laravel web developers! In this article, we'll see how to load more data on scroll with jQuery Ajax in laravel 11. Here, we'll learn about infinite scroll in laravel 11 using Ajax. We'll load more data using Ajax pagination on scroll in the laravel 11 application.

Sometimes, we have many records, making the page length too large. In such cases, we can implement infinite scroll with the help of jQuery in Laravel.

jQuery Load More Data on Scroll in Laravel 11

 

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

 

Next, we'll configure the database. In laravel 11, the default database connection is SQLite but here we'll use MySQL.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-11
DB_USERNAME=root
DB_PASSWORD=

 

Then, we'll create a migration using the following command.

php artisan make:migration create_posts_table

Migration:

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

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Then, run the following command to migrate the table into the database.

php artisan migrate

 

Next, create a Post model using the following command and add the fillable fields.

app/Models/Post.php

<?php
    
namespace App\Models;
    
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
    
class Post extends Model
{
    use HasFactory;
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    protected $fillable = [
        'title', 'body', 'slug'
    ];
}

 

Then, we'll create a Factory class using the following command.

php artisan make:factory PostFactory --model=Post

database/factories/PostFactory.php

<?php
    
namespace Database\Factories;
    
use Illuminate\Database\Eloquent\Factories\Factory;
use App\Models\Post;
use Illuminate\Support\Str;
    
/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory
 */
class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;
      
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition(): array
    {
        return [
            'title' => $this->faker->text(),
            'slug' => Str::slug($this->faker->text()),
            'body' => $this->faker->paragraph()
        ];
    }
}

Now, open the terminal and run the following command.

php artisan tinker

Post::factory()->count(50)->create()

 

Now, define the routes into the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\PostController;
    
Route::get('posts',[PostController::class,'index'])->name('posts.index');

 

Next, create a controller, define the index function, and add an Ajax call to load more data.

app/Http/Controllers/PostController.php

<?php
     
namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use App\Models\Post;
     
class PostController extends Controller
{
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request)
    {
        $posts = Post::paginate(15);
  
        if ($request->ajax()) {
            $view = view('data', compact('posts'))->render();
  
            return response()->json(['html' => $view]);
        }
  
        return view('posts', compact('posts'));
    }
}

 

Next, create a blade file and add the html and jquery ajax call

resources/views/posts.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 11 Load More Data on Scroll with jQuery and Ajax - Techsolutionstuff</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
      
<div class="container mt-5" style="max-width: 750px">
  
    <h1>Laravel 11 Load More Data on Scroll with jQuery and Ajax - Techsolutionstuff</h1>
  
    <div id="data-wrapper">
        @include('data')
    </div>
  
    <div class="text-center">
        <button class="btn btn-success load-more-data"><i class="fa fa-refresh"></i> Load More Data...</button>
    </div>
  
    <!-- Data Loader -->
    <div class="auto-load text-center" style="display: none;">
        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#000"
                d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                    from="0 50 50" to="360 50 50" repeatCount="indefinite" />
            </path>
        </svg>
    </div>
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var url = "{{ route('posts.index') }}";
    var page = 1;
  
    $(".load-more-data").click(function(){
        page++;
        infinteLoadMore(page);
    });
  
    function infinteLoadMore(page) {
        $.ajax({
                url: url + "?page=" + page,
                datatype: "html",
                type: "get",
                beforeSend: function () {
                    $('.auto-load').show();
                }
            })
            .done(function (response) {
                if (response.html == '') {
                    $('.auto-load').html("We don't have more data to display :(");
                    return;
                }

                $('.auto-load').hide();
                $("#data-wrapper").append(response.html);
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
                console.log('Server error occured');
            });
    }
</script>
</body>
</html>

resources/views/data.blade.php

@foreach ($posts as $post)
<div class="card mb-2"> 
    <div class="card-body">{{ $post->id }} 
        <h5 class="card-title">{{ $post->title }}</h5>
        {!! $post->body !!}
    </div>
</div>
@endforeach

 

Now, run the laravel 11 application using the following command.

php artisan serve

 

---

You might also like :

• Read Also: Install Tailwind CSS with Laravel 11
• Read Also: Dependent Dropdown Using Ajax Laravel 11 Example
• Read Also: How to Create AJAX CRUD Operation in Laravel 11
• Read Also: Laravel 10 Datatable Date Range Filter using AJAX