نلاحظ في بعض مواقع التواصل الإجتماعي أو مواقع التجارة الإلكترونية، أن لكما نزلنا لأسفل يتم تحميل المزيد من البيانات، ويتم ذلك بشكل تلقائي، ودون أن يتم تحديث الصفحة وذلك بإستخدام تقنية ajax. في هذا المقال سيتم شرح كيفية عمل ذلك (infinity page scroll) في تطبيقات لارافيل.

خطوات بناء infinite page scroll في تطبيقات لارافيل؟

إنشاء route

Route::get('/users',[UserController::class,'index']);

إنشاء دالة index بداخل UserController

public function index(Request $request)
{
    $posts = User::paginate(20);
    $data = '';
    if ($request->ajax()) {
        foreach ($posts as $post) {
            $data.='<li>'.$post->id.' <strong>'.$post->name.'</strong> : '.$post->email.'</li>';
        }
        return $data;
    }
    return view('users');
}

شرح الدالة

  • إستخراج البيانات ( 20 عنصر).
  • عندما يكون هناك request->ajax سيتم عمل عمل إستخراج لعشرين عنصر من قاعدة البيانات ثم عمل loop عليها وإرجاعها.

إنشاء ملف users.blade.php

تضمين jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

بناء html لعرض البيانات

<div class="container">
    <div class="wrapper">
        <ul id="results"><!-- results appear here --></ul>
        <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
    </div>
</div>

ما يهمنا هنا:

  •  id=results وهو االمكان الذي سيتم عرض البيانات بداخلة.
  • الكلاس ajax-loading حيث يتم عرض صوره loading بداخلة، بحيث تختفي عندما يتم عرض البيانات.

بناء كود jquery و ajax

<script>
    var SITEURL = "{{ url('http://www.test.test/') }}";
    var page = 1; //track user scroll as page number, right now page number is 1
    load_more(page); //initial content load
    $(window).scroll(function() { //detect page scroll
        if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
            page++; //page number increment
            load_more(page); //load content
        }
    });
    function load_more(page){
        $.ajax({
            url: SITEURL + "users?page=" + page,
            type: "get",
            datatype: "html",
            beforeSend: function()
            {
                $('.ajax-loading').show();
            }
        })
            .done(function(data)
            {
                if(data.length == 0){
                    console.log(data.length);
                    //notify user if nothing to load
                    $('.ajax-loading').html("No more records!");
                    return;
                }
                $('.ajax-loading').hide(); //hide loading animation once data is received
                $("#results").append(data); //append data into #results element
                console.log('data.length');
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('No response from server');
            });
    }
</script>

شرح كود ajax

  • تعريف رابط الموقع.
  • تعريف متغير page وإعطاءه قيمة إفتراضيه تساوي 1.
  • إستدعاء الدالة load_more مع تمرير المتغير page لها، وبذلك عندما يتم عرض الصفحة سيتم تنفيذ هذه الدالة، فسيتم إلذهاب إلى users?page=1 وفي الدالة index بداخل UserController سيتم جلب أول 20 مستخدم.
  • عند عمل scroll للصفحة سيتم زيادة المتغير page بـ 1، ومن ثم إستدعاء الدالة loade_more، بمعنى عند أول سكرول سيتم تنفيذ الدالة load_more(2)، وبذلك سيتم الذهاب إلى الدالة index بداخل UserController وجلب 20 مستخدم أخرين.
  • تم تحديد نوع البيانات المرجعة من نوع html.
  • عرض صوره loading  حتى يتم تحمل البيانات.
  • إظهار رسالة no more records إذا لم يتم إرجاع بيانات.

صفحة html بالكامل

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 load more page scroll - EtharShrouf.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .wrapper > ul#results li {
            margin-bottom: 2px;
            background: #e2e2e2;
            padding: 20px;
            width: 97%;
            list-style: none;
        }
        .ajax-loading{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="wrapper">
        <ul id="results"><!-- results appear here --></ul>
        <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
    </div>
</div>
<script>
    var SITEURL = "{{ url('http://www.test.test/') }}";
    var page = 1; //track user scroll as page number, right now page number is 1
    load_more(page); //initial content load
    $(window).scroll(function() { //detect page scroll
        if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
            page++; //page number increment
            load_more(page); //load content
        }
    });
    function load_more(page){
        $.ajax({
            url: SITEURL + "users?page=" + page,
            type: "get",
            datatype: "html",
            beforeSend: function()
            {
                $('.ajax-loading').show();
            }
        })
            .done(function(data)
            {
                if(data.length == 0){
                    console.log(data.length);
                    //notify user if nothing to load
                    $('.ajax-loading').html("No more records!");
                    return;
                }
                $('.ajax-loading').hide(); //hide loading animation once data is received
                $("#results").append(data); //append data into #results element
                console.log('data.length');
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('No response from server');
            });
    }
</script>
</body>
</html>