Laravel Livewire Load More on Page Scroll
Hello artisans, In this tutorial, I will show you the Load More On page scroll operation using Livewire. Before starting, I strongly recommend you to see my previous article about Laravel Livewire CRUD. So, no more talk, let’s get dive into the topic.
Table of Contents
Install Livewire and configure basic things
In this step, I suggest you to one of my short articles called Larave Livewire CRUD with Example which was easy to implement and very helpful for my today’s topic
Modifications on Component and View
In the previous article, we create a component called User.php. So, open up this file and replace it with the below codes.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User as UserModel;
class User extends Component
{
public $name, $email, $user_id;
public $updateMode = false;
public $perPage = 12;
protected $listeners = [
'load-more' => 'loadMore'
];
public function render()
{
$users = UserModel::latest()->paginate($this->perPage);
$data = [
'users' => $users
];
return view('livewire.user',$data);
}
public function loadMore()
{
$this->perPage = $this->perPage + 5;
}
private function resetInputFields()
{
$this->name = '';
$this->email = '';
}
public function store()
{
$this->validate([
'name' => 'required',
'email' => 'required|email',
]);
UserModel::create([
'name' => $this->name,
'email' => $this->email,
]);
session()->flash('message', 'Users Created Successfully.');
$this->resetInputFields();
$this->emit('userStore'); // Close model to using to jquery
}
public function edit($id)
{
$this->updateMode = true;
$user = UserModel::find($id);
$this->user_id = $id;
$this->name = $user->name;
$this->email = $user->email;
}
public function cancel()
{
$this->updateMode = false;
$this->resetInputFields();
}
public function update()
{
$this->validate([
'name' => 'required',
'email' => 'required|email',
]);
if ($this->user_id) {
$user = UserModel::find($this->user_id);
$user->update([
'name' => $this->name,
'email' => $this->email,
]);
$this->updateMode = false;
session()->flash('message', 'Users Updated Successfully.');
$this->resetInputFields();
}
}
public function delete($id)
{
if ($id) {
UserModel::destroy($id);
session()->flash('message', 'Users Deleted Successfully.');
}
}
}
Now open up the home.blade.php and replace with the following code:
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@livewireStyles
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel Livewire Crud with On Scroll Paginate/Load More</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('user')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
<script type="text/javascript">
window.livewire.on('userStore', () => {
$('#exampleModal').modal('hide');
});
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('load-more');
}
};
</script>
</body>
</html>
And that’s it we successfully implement the On Scroll Paginate/Load More on our application. Thanks to our previous article which makes our life easy.
That’s all for today. You can download the project from GitHub also. Thanks for reading.
