Laravel 11 jQuery Load More Data on Scroll Example
In this tutorial, we’ll explore how to implement AJAX-based pagination to load more data on scroll in a Laravel 11 application. This approach enhances the user experience by dynamically loading additional content without the need for page refreshes.
We will walk through creating a posts table with migration, setting up a model and factory for generating dummy data, and implementing the AJAX logic for infinite scrolling. Let’s dive in step-by-step.
Step 1: Install Laravel 11
If you haven’t set up a Laravel application yet, you can install Laravel 11 using the following command:
composer create-project laravel/laravel example-app
Step 2: MySQL Database Configuration
To configure MySQL as your database, update the .env file with your database credentials:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog_test
DB_USERNAME=root
DB_PASSWORD=your_password
Step 3: Create Migration
Create a new migration for the posts table:
php artisan make:migration create_posts_table
In the generated migration file (database/migrations/xxxx_xx_xx_create_posts_table.php), add the following code:
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug');
$table->text('body');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('posts');
}
};
Now you have to run this migration with the following command:
php artisan migrate
Step 4: Create Model
After creating the “posts” table, you should create the Post model for posts. First, create a file in this path app/Models/Post.php and put the following content in the Post.php file:
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = ['title', 'body', 'slug'];
}
Step 5: Create Factory Class
Generate a factory to create dummy post data:
php artisan make:factory PostFactory --model=Post
Update the factory file (database/factories/PostFactory.php) with below mentioned code:
namespace Database\Factories;
use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
class PostFactory extends Factory
{
protected $model = Post::class;
public function definition(): array
{
return [
'title' => $this->faker->sentence(),
'slug' => Str::slug($this->faker->sentence()),
'body' => $this->faker->paragraph()
];
}
}
Open the terminal and execute the commands below to generate the test data :
php artisan tinker
Post::factory()->count(20)->create()
Step 6: Create Route
In this step, we need to create routes for displaying posts and getting posts. So, open your “routes/web.php” file and add the following route.
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('posts', [PostController::class, 'index'])->name('posts.index');
Step 7: Create Controller
Here, we need to create a new controller, PostController, with an index method to display the posts view and return data. So let’s put the code below.
PATH : app/Http/Controllers/PostController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index(Request $request)
{
$posts = Post::paginate(10);
if ($request->ajax()) {
$view = view('data', compact('posts'))->render();
return response()->json(['html' => $view]);
}
return view('posts', compact('posts'));
}
}
Step 8: Create View Files
In the last step, let’s create posts.blade.php and data.blade.php for displaying the posts list and put the following code:
Place below code in resources/views/posts.blade.php file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Load More Data on Scroll using jQuery in Laravel 11</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>Load More Data on Scroll using jQuery in Laravel 11</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>
<div class="auto-load text-center" style="display: none;">
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" 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 ENDPOINT = "{{ route('posts.index') }}";
var page = 1;
$(".load-more-data").click(function(){
page++;
infinteLoadMore(page);
});
function infinteLoadMore(page) {
$.ajax({
url: ENDPOINT + "?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 occurred');
});
}
</script>
</body>
</html>
Place below code in resources/views/data.blade.php file.
@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
Step 9: Run Laravel App
Finally, start your Laravel application by running below commnd :
Visit your browser at http://localhost:8000/posts to see the load more functionality in action.
php artisan serve
Conclusion :
By following these steps, you’ll have a seamless infinite scrolling feature in your Laravel 11 application. Happy coding!
