Auto Load More Data on Page Scroll using AJAX in Laravel

Auto-loading more data on page scroll using AJAX in Laravel can greatly enhance the user experience by providing continuous content without the need to navigate to a new page. This technique is commonly known as "infinite scrolling." Here's how you can achieve this in Laravel with an example:

1. Set Up the Route:

First, define a route that will handle the AJAX requests to load more data. In your `routes/web.php` file, add a route for fetching more data:

Route::get('/load-more-data', 'HomeController@loadMoreData')->name('load-more-data');

2. Create the Controller Method:

Create a controller method that will handle the AJAX requests and return the additional data. In this example, we'll use a `HomeController` and a method named `loadMoreData`:

use Illuminate\Http\Request;

public function loadMoreData(Request $request)

{

$lastId = $request->input('last_id');

$items = YourModel::where('id', '>', $lastId)->take(10)->get();

return response()->json(['items' => $items]);

}

3. Set Up the Blade View:

In your Blade view, you can display the initial data and set up the structure for the infinite scroll. Include a container where the new data will be appended as the user scrolls:

@foreach ($initialItems as $item)

@endforeach

</div>

<div id="loading" style="display: none;">Loading...</div>

4. JavaScript and AJAX Setup:

Include jQuery or any other JavaScript library you prefer, and set up the AJAX request to load more data as the user scrolls:

$(document).ready(function () {

let lastId = {{ $initialItems->last()->id ?? 0 }};

let loading = false;

$(window).on('scroll', function () {

if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100 && !loading) {

loading = true;

$('#loading').show();

$.ajax({

url: '{{ route('load-more-data') }}',

type: 'GET',

data: { last_id: lastId },

success: function (response) {

if (response.items.length > 0) {

response.items.forEach(function (item) {

$('#data-container').append('<div class="item">' + item.name + '</div>');

lastId = item.id;

});

} else {

$(window).off('scroll');

}

$('#loading').hide();

loading = false;

}

});

}

});

In this example, as the user scrolls close to the bottom of the page, an AJAX request is sent to the `load-more-data` route, which retrieves additional items from the database. The new items are then appended to the `data-container` element. The loading indicator (`#loading`) helps inform users that new data is being loaded.

Remember to adjust the code according to your project's structure and requirements. This example provides a basic implementation of auto loading more data on page scroll using AJAX in Laravel.