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.
