Load More Data on Page Scroll in Laravel

I think we are all familiar with load more technique in Facebook, Youtube etc. Today I will show you how to dynamically load the data on a button click instead of displaying the pagination links. Load more technique makes your website more interactive because the data is loaded without refreshing the page. In this tutorial, we use technologies like Ajax, Jquery, Bootstrap etc to create a beautiful load more data technique in the easiest way.

SO LET’S START CODING

1) Create Table and Model

2) Add Routes

3) Create DemoController

The Helper is a custom helper file created by me to load image thumbnail of each post. If you like to learn more about how to create custom helper function in laravel visit following link.

4) Create  View Page

The javascript code for in the view page

Since we are using post ajax request in laravel we need to also pass csrf tokens along with the code since laravel always look for csrf tokens in the post and put requests. If we don’t pass it we will get a 500 error. The reason why i used $(document).on(‘click’,id,function(){}); instead of simple button click function is if we use button click function the button click will trigger only the first time. The reason that the handler is only being fired once is because the “.click” handler only applies to elements that are currently attached to the DOM. If you replace the HTML after making the AJAX call, the event handlers will be lost. So you should use an on method instead.

The Complete View Page

As you can see the remove-row div is removed and replaced with server-side contents on ajax call. The sample image of above code is given below.

Load More Data Demo - Shareurcodes

The Demo

You can demo the following application by visiting the following link.

https://shareurcodes.com/demos/loaddata

If you have any suggestions or doubts please comment below and I try will respond to every one of you as early as possible.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Gửi email cho tôi

Hotline
0396.504.701
GÓP Ý
CỦA BẠN
Hotline
0396.504.701
ĐĂNG KÝ
NHẬN THÔNG TIN