How to create load more on scroll functionality in laravel?

Create load more on scroll functionality in laravel

Main listing file

<style>

.notifications_page_cover_ui {

    overflow: auto;

    max-height: 474px;

}

</style>

<div class="ps-section__right">

    <div class="section-header">

        <h3>Notifications</h3>

    </div>

    <div class="section-content">

       <div class="notifications_page_cover_ui" id="load-more-container">

        <?php echo $notification_list ?>

       </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

$(document).ready(function() {

    let lastNotificationID = {!! $lastNotificationID !!}; // Pass the last item ID from your controller or view

    let loading = false;

    function loadMoreData() {

        if (loading) {

            return; // If a request is already in progress, do nothing

        }

        loading = true; // Set the flag to indicate that a request is in progress

        $.ajax({

            url:  "{{route('customer.loadMoreNotifications')}}",

            method: 'GET',

            data: { lastNotificationID: lastNotificationID },

            success: function(response) {

                loading = false; // Reset the flag when the request is complete

                if (response["notification_list"].length > 0) {

                    let notification_list = '';

                    /* console.log();  */

                    $('#load-more-container').append(response["notification_list"]);

                    lastNotificationID = response["lastNotificationID"];

                } else {

                    // No more data to load

                }

            },

            error: function() {

                loading = false; // Reset the flag in case of an error

            }

        });

    }

    $('#load-more-container').on('scroll', function() {

        let scrollableDiv = $(this);

        let scrollableHeight = scrollableDiv.prop('scrollHeight');

        let visibleHeight = scrollableDiv.height();

        let scrollPosition = scrollableDiv.scrollTop();

        if (scrollPosition + visibleHeight >= scrollableHeight - 100) {

            // Scroll has reached the end of the div

            loadMoreData();

        } else {

            // Scroll is not at the end of the div

        }

    });

});

</script>


Controller function file

    public function getNotifications(Request $request, BaseHttpResponse $response)

    {   

        $currentUser = auth('customer')->user();

        $notifications = Notification::where("sent_to",$currentUser->id)->with(["SentTo"])->orderBy("id","DESC")->paginate(10);

        $lastNotificationID = $notifications->last();

        $lastNotificationID = $lastNotificationID->id;

        $notification_list_view = Theme::getThemeNamespace() . '::views.ecommerce.customers.notifications.notification-list';

        $notification_list = view($notification_list_view,compact("notifications"))->render();

        return Theme::scope('ecommerce.customers.notifications.all-notifications',compact("lastNotificationID","notification_list"))->render();

    }

    public function loadMoreNotifications(Request $request)

    {

        $currentUser = auth('customer')->user();

        $lastNotificationID = $request->input('lastNotificationID');

        // Fetch more data from your model using the lastItemID as an offset

        $notifications = Notification::where('id', '<', $lastNotificationID)->where("sent_to",$currentUser->id)->with(["SentTo"])->orderBy("id","ASC")->paginate(10);

        if(!empty($notifications[0])){

            $lastNotificationID = $notifications->last();

            $lastNotificationID = $lastNotificationID->id;

        }

        $notification_list_view = Theme::getThemeNamespace() . '::views.ecommerce.customers.notifications.notification-list';

        $notification_list = view($notification_list_view,compact("notifications"))->render();

        $data = ["notification_list"=>$notification_list,"lastNotificationID"=>$lastNotificationID];

        return response()->json($data);

    }

Data listing file (notification-list.blade.php)

@if(!empty($notifications[0]))

    @foreach($notifications as $notification)

    <div class="notofication_card_ui {{ ($notification->is_read == '0')? 'project_assigned_ui' : ''}}">

        <div class="user_card_box">

            <span class="user_avatar"><img src="{{$notification->SentTo->avatar_url}}"></span>

            <div class="user_message_description"><h5 class="user_name">{{$notification->id}}{{$notification->SentTo->name}}</h5><span class="message__sent_time">{{$notification->created_time_ago}}</span></div>

        </div>

        <div class="user_comment_box">

        <p>{{$notification->message}}</p>

        </div>

        <div class="view_notification_btn"><a href="{{route('customer.readNotifications', $notification->id)}}" class="view_more_notification_btn">View</a></div>

    </div>

    @endforeach

@endif