load more in laravel

Solutions on MaxInterview for load more in laravel by the best coders in the world

showing results for - "load more in laravel"

04 Oct 2017

1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3
4<head>
5    <meta name="csrf-token" content="{{ csrf_token() }}">
6
7    <title>Laravel dynamic auto load more page scroll examle</title>
8
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
10</head>
11
12<body>
13    <div class="container mt-5" style="max-width: 550px">
14        <div id="data-wrapper">
15            <!-- Results -->
16        </div>
17
18        <!-- Data Loader -->
19        <div class="auto-load text-center">
20            <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
21                x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
22                <path fill="#000"
23                    d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
24                    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
25                        from="0 50 50" to="360 50 50" repeatCount="indefinite" />
26                </path>
27            </svg>
28        </div>
29    </div>
30
31
32    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
33    <script>
34        var ENDPOINT = "{{ url('/') }}";
35        var page = 1;
36        infinteLoadMore(page);
37
38        $(window).scroll(function () {
39            if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
40                page++;
41                infinteLoadMore(page);
42            }
43        });
44
45        function infinteLoadMore(page) {
46            $.ajax({
47                    url: ENDPOINT + "/blogs?page=" + page,
48                    datatype: "html",
49                    type: "get",
50                    beforeSend: function () {
51                        $('.auto-load').show();
52                    }
53                })
54                .done(function (response) {
55                    if (response.length == 0) {
56                        $('.auto-load').html("We don't have more data to display :(");
57                        return;
58                    }
59                    $('.auto-load').hide();
60                    $("#data-wrapper").append(response);
61                })
62                .fail(function (jqXHR, ajaxOptions, thrownError) {
63                    console.log('Server error occured');
64                });
65        }
66
67    </script>
68</body>
69
70</html>

source

similar questions

laravel load more on scroll onclick load table laravel laravel get nested relationships data with eager loading get data from model in chunks laravel laravel create multiple models at once save multiple data in laravel include blade file in laravel add data one to many laravel laravel filemanger choose multiple images creating multiple classes in file laravel extend laravel blade include a file in laravel controller laravel eager loading where clause laravel load relationship nested resources laravel laravel store multiple files laravel attach once laravel model insert multiple lazy loading in laravel

queries leading to this page

load more in laravel laravel load more load more functionality in laravel load more in laravel