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:

<div id="data-container">

    @foreach ($initialItems as $item)

        <div class="item">{{ $item->name }}</div>

    @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.