Laravel 8 Auto Load More Data On Page Scroll

Laravel 8 Auto Load more data on Infinite page scroll in laravel 8. In this tutorial, we will guide you on how to create auto load more data in laravel 8 app on page scroll using jQuery ajax.

Sometime, you need to auto load more data on the infinity page scroll in laravel 8 app. So, this tutorial will help you on how to create infinity page scroll app in laravel 8 app.

Auto Load More Data On Page Scroll In Laravel 8

Laravel 8 auto load more data on infinity page scroll app using jQuery ajax:

  • Step 1 – Install Laravel 8 App
  • Step 2 – Connecting App to Database
  • Step 3 – Create One Model and Migration
  • Step 4 – Add Route
  • Step 5 – Create Controller by Command
  • Step 6 – Create Blade View
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel 8 App

In this step, Execute the following command on terminal to download or install the laravel 8 app:

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

Step 2 – Connecting App to Database

In this step, Open Laravel 8 app 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, Execute the following command on terminal to 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 – Add Route

In this step, open “web.php” file, which is located inside Routes directory and add the following route into web.php file:

use App\Http\Controllers\PostController; Route::get('posts', [PostController::class, 'index']);

Step 5 – Create Controller by Command

In this step, execute the following command on terminal to create controller name PostController.php file:

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\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'); }
}

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 8 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, execute the php artisan serve command on termianl to start development server locally:

php artisan serve

Step 8 – Test This App

Open browser and hit the following url on it:

http://127.0.0.1:8000/posts

Conclusion

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

Related Posts