Skip to main content
Hi Everyone ,

On VF page populate a list of data (128 items) on popup window and Popup should show only 7 rows at a time. Next set of data will appear on mouse scroll. Once mouse scroll reaches 128th item, It should send a call to apex to load more items.
1 answer
  1. Jul 10, 2019, 7:46 AM

    Hi Rahul,

    You can achieve this through lazy loading.

    You can use this jQuery  http://imakewebthings.com/jquery-waypoints/

    link:- https://github.com/imakewebthings/waypoints

    Below is the simple way of calling a waypoints plugin and having the page load more Content once you reaches the bottom on SCR

    $(document).ready(function() {

        var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),

        $footer = $('footer'),

        opts = {

            offset: '100%'

        };

        $footer.waypoint(function(event, direction) {

            $footer.waypoint('remove');

            $('body').append($loading);

            $.get($('.more a').attr('href'), function(data) {

                var $data = $(data);

                $('⌗container').append($data.find('.article'));

                $loading.detach();

                $('.more').replaceWith($data.find('.more'));

                $footer.waypoint(opts);

            });

        }, opts);

    });

    Above is the simple way for lazy loading you can also manage it according to your needs.

    to know more about lazy loading please go through the given link:-

    -http://www.infallibletechie.com/2016/01/lazy-loading-visualforce-page.html

    I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

    Thanks and Regards,

    Deepali Kulshrestha
0/9000