Show More Data When Mouse Scrolling Down

• Download source - 1.1 MB

Introduction

Almost all social webpages like Facebook, Twitter, Google+..., display the latest news, status on the top, then you scroll down to the bottom, it automatically shows older data. In this tip, I am going to show you a sample of loading more on event mouse scrolling down using jQuery and ASP.NET C#.

Using the Code

In the head section (head tag), you need to refer to jQuery library like below:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 

And on ready function, you should code like this. In the below code, there is an event $(document).scroll() to detect window scrolling event:

 $(function () {
            doLoadingMore($("#divNews"), 1);
            $(document).unbind("scroll");
            var lastScrollTop = 0;
            $(document).scroll(function (event) {
                var st = $(this).scrollTop();
                if (st > lastScrollTop) {
                    if (st >= ($(document).height() - $(window).height())) {
                        doLoadingMore($("#divNews"), 0);
                    } else {
                        //donothing
                    }
                    lastScrollTop = st;
                }
            });

  }); 

The doLoadingMore function should be like below. In this code block, there is a hidden field to update the page index value when data loaded.

 function doLoadingMore(that, actiontype) {
            var $that = $(that);
            if ($that.data("ajax") == true)
                return;
            var hdfPageIndex = $("#<%=hdf_page_index.ClientID %>");
            var pageIndex = parseInt($(hdfPageIndex).val());
            if (actiontype == 1) {
                pageIndex = 1;
                $(hdfPageIndex).val("1");
            } else {
                pageIndex = parseInt(pageIndex) + 1;
            }
            var data = "{'pageIndex':'" + pageIndex + "'}";
            LoadingAjax("jQueryShowMore.aspx/FetchNews", data,
            //Before send
                function () {
                    $that.ShowLoadingImange();
                    $that.data("ajax", true);
                },
            //On success
                function (dt) {
                    $("#divNews").append(dt.d);
                    if (data.data != '') {
                        $(hdfPageIndex).val(pageIndex);
                    }
                    $that.data("ajax", false);
                    $that.find(".indicator").remove();
                },
            //On error
                function () {
                    $that.data("ajax", false);
                    $that.find(".indicator").remove();
                }
            );
        } 

The LoadingAjax function is defined in CommonFunctions.js file. You should refer to it. This function is used to call a service method and return data as json formatted.

 <script type="text/javascript" src="Scripts/CommonFunctions.js"></script>  

var base_ajax_timeout = 120000;
function LoadingAjax(url, datapost, beforesend, onsuccess, onerror) {
    $.ajax({
        url: url,
        data: datapost,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        async: true,
        timeout: base_ajax_timeout,
        beforeSend: function () {
            beforesend();
        },
        success: function (data) {
            if (data.d != null) {
                onsuccess(data);
            }
        },
        error: function () {
            onerror();
        }
    });
} 

In the jQueryShowMore.aspx.cs file, there is a service method called FetchNews to load data from repository (like database, but in this example, the data is stored in heap memory).

 [System.Web.Services.WebMethod]
        public static string FetchNews(int pageIndex)
        {
            var sbToReturn = new StringBuilder();
            var lstFetchSocialNews = lstSocialNewsRepository.Skip((pageIndex - 1) * PageSize).Take(PageSize).ToList();
            //Server delay to see loading image
            System.Threading.Thread.Sleep(1200);
            foreach (var item in lstFetchSocialNews)
            {
                string imagePath = (item.ImagePath != "") ? "<tr>
                <td><img src='{3}' id='imageContent'/></td></tr>" : "{3}";
                sbToReturn.AppendFormat("<div id='container'>" +
                                        "<table>" +
                                        "<tr>" +
                                        "<td rowspan='4' valign='top'>" +
                                        "<img src='{0}' id='avatar'/>" +
                                        "</td>" +
                                        "<td id='owner'>" +
                                        "<b>{1}<b>" +
                                        "</td>" +
                                        "</tr>" +
                                        "<tr>" +
                                        "<td id='contentText'>" +
                                        "{2}" +
                                        "</td>" +
                                        "</tr>" +
                                        imagePath +
                                        "<tr>" +
                                        "<td style='font-size:0.8em;'>
                                        <a href='#'>Like&nbsp;&nbsp;&nbsp;.
                                        </a><a href='#'>Comment&nbsp;&nbsp;&nbsp;.
                                        </a><a href='#'>Share&nbsp;&nbsp;&nbsp;</a>" +
                                        "<span id='postedDate'>{4}</span>" +
                                        "</td>" +
                                        "</tr>" +
                                        "</table>" +
                                        "</div>", item.AvatarPath, item.Owner, item.ContentText, item.ImagePath,
                                        item.PostedDate);
            }
            return sbToReturn.ToString();
        }  

The ShowLoadingImage function is a user function defined in $.fn.extend like below. It displays the loading image when waiting for response from the server.

        $.fn.extend({
            ShowLoadingImange: function () {
                var img = $(this);
                $(this).css({ "position": "relative" });
                var indicator = $("<div>").addClass("indicator").css({
                    width: img.width(),
                    height: img.height(),
                    backgroundColor: "#ffffff",
                    opacity: 0.3,
                    display: "block",
                    position: "absolute",
                    top: 0,
                    'z-index': 9999
                }).append($("<img>", {
                    src: "Images/indicator.gif"
                }).css({
                    position: "fixed",
                    top: $(window).innerHeight() / 2,
                    left: $(window).innerHeight() / 2 + 300
                }));
                return $(this).append(indicator);
            }
        });

Points of Interest

Loading more data on window scrolling instead of using paging.

History

• 21^st February, 2014: Initial post