jQuery Infinite Scroll

Infinite scroll became a kind of standard in modern web apps, so I wanted to implement it in a project I’m working on. I’ve browsed the net looking for the way to accomplish this task, and found this example, which seemed quite cool and easy to implement. Its owner allowed everyone to use the script, as long as they keep the author’s credits. I’ve made few changes to better suit my needs, but the overall script is still the same. This is a short tutorial on how to implement the infinite scroll in C# ASP.Net application, using jQuery.

If you take a look at the original code, you’ll see that the data to be shown is taken from an html file. In my project, I’m fetching the data from server, in chunks of 50 records per call. Since I wanted to keep it as simple as possible and not change the script if not necessary, I’ve created server method that returns the string containing html list item objects to be added to my content div. Here is it how it all looks like:

ASPX:

<div>
    <h2>News Feed</h2>
    <ul id="content"></ul>
    <div id="loading">Wait a moment... it's loading!</div>
    <div id="nomoreresults">Sorry, no more results.</div>
</div>

Note that the “content” element is the list to add the items to.

cs:

[System.Web.Services.WebMethod(true)]
public static string GetNewsFeed(int currentCount)
{
    StringBuilder newsFeedSb = new StringBuilder();
    List notifications = ActionManager.GetNewsFeed(Global.CurrentUser, 50, currentCount*50);

    foreach (BLL.Action notification in notifications)
    {
        string messageText = "";

        //	some magic here, e.g.:
        string notificationDate = notification.ActionDate != null ? ((DateTime)notification.ActionDate).ToString("yyyy-MM-dd") : "date unknown";
        messageText = string.Format("<li><p>{0}: You have updated your profile.</p></li>", notificationDate);
        //      more business logic...

        if (messageText != "")
        {
            newsFeedSb.Append(messageText);
        }
    }

    return newsFeedSb.ToString();
}

In this server method, I’m getting the data from database layer in chunks of 50, and in order to know which page I’m on, I use currentCount, sent by the ajax request.

When it comes to javascript, I’ve made couple of changes to the original script.

First of all, I’ve added a global variable count, to track current page I’m on. It is set to 0 on load. In original scrollpagination.js, I’ve changed loadContent method, so each time the data is successfully received on client, the count value increases by 1. Also, in the ajax call, count value is sent as data parameter. Finally, dataType I need is json, instead of html. All the changes are highlighted in the following code:

scrollpagination.js:

var count = 0;
$.fn.scrollPagination.loadContent = function(obj, opts) {
    var target = opts.scrollTarget;
    var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
    if (mayLoadContent) {
        if (opts.beforeLoad != null) {
            opts.beforeLoad();
        }
    $(obj).children().attr('rel', 'loaded');
    $.ajax({
        type: 'POST',
        url: opts.contentPage,
        data: "{'currentCount':'" + count + "'}", //opts.contentData,
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            $(obj).append(data.d);
            var objectsRendered = $(obj).children('[rel!=loaded]');
            count++;
            if (opts.afterLoad != null) {
                opts.afterLoad(objectsRendered);
            }
        },
        error:
            function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            },
        dataType: "json"
  });
 }
};

Of course, method name and location have to be set, and also, I’ve removed contentData property, since I don’t need it anymore (it is set in scrollpagination.js).

$('#content').scrollPagination({
    'contentPage': window.location.pathname + '/GetNewsFeed',
    'scrollTarget': $(window),
    'heightOffset': 10,
    'beforeLoad': function() {
        $('#loading').fadeIn();
    },
    'afterLoad': function(elementsLoaded) {
        $('#loading').fadeOut();
        var i = 0;
        $(elementsLoaded).fadeInWithDelay();
    }
 });

So, that’s it! Piece of cake :)

2 thoughts on “jQuery Infinite Scroll

  1. Hello, very helpful! one question tho,
    List notifications = ActionManager.GetNewsFeed(Global.CurrentUser, 50, currentCount*50);

    foreach (BLL.Action notification in notifications)
    {

    what should the “BLL.Action” look like?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>