In this tutorial you will learn about the Laravel 9 Auto Load More Data on Page Scroll with jQuery AJAX and its application with practical example.
In this Laravel 9 Auto Load More Data on Page Scroll with jQuery AJAX tutorial I’ll show you how to implement infinity scroll or dynamix ajax auto load more pagination on page scroll in laravel 9 using ajax. In this tutorial you will learn to implement dynamic auto load more pagination in laravel using ajax in laravel 9. In this step by step guide I’ll share example of ajax auto load more or infinity scroll in laravel 9 application.
Laravel 9 Auto Load More Data on Page Scroll with jQuery AJAX
In this step by step tutorial I will demonstrate you with example to create dynamix ajax load more pagination on page scroll in laravel. Please follow the instruction given below:
- Install Laravel 9
- Connecting App to Database
- Create One Model and Migration
- Add Route
- Create Controller by Command
- Create Blade View
- Run Development Server
- Test This App
Install Laravel 9
First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command
1 |
composer create-project --prefer-dist laravel/laravel blog |
Connecting App to Database
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
1 2 3 4 5 6 |
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 |
Create Model and Migration
Now, in this step we will create model and migration file. Please run the following command:
1 |
php artisan make:model Post -m |
Now, go to app/database/migrations and open posts migration file and add following fields:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?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'); } } |
Now, run the migration to create database table using following artisan command:
1 |
php artisan migrate |
Add Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
1 2 3 |
use App\Http\Controllers\PostController; Route::get('posts', [PostController::class, 'index']); |
Create Controller by Command
Now, lets create a controller named PostController using command given below –
1 |
php artisan make:controller PostController |
Once the above command executed, it will create a controller file PostController.php in app/Http/Controllers/ directory. Open the PostController.php file and put the following code in it.
app/Http/Controllers/PostController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Validator,Redirect,Response; use App\Models\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'); } } |
Create a blade view
In this step we will create blade view file. Lets create a blade file posts.blade.php. And put the below HTML code into your posts.blade.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!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 9 load more page scroll</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> |
The blade view file will list all your blog posts when you scroll the page down. Next, update the following script into your blade view file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://127.0.0.1:8000/posts |