Progressive (continuous) loading using jQuery

Sheonarayan
Posted by in jQuery category on for Advance level | Points: 250 | Views : 2743 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, we are going to learn how to implement progressive loading of content in jQuery. It is also called continuous loading or on demand loading. This is implemented in a scenario, where we have tons of data to display on the page and we do not want to show all at once. As and when use keeps scrolling the page, we keep loading the data from server and showing them.
Recommendation
Read How to work with Transactions in ASP.NET MVC ? before this article.

Introduction

As the data are growing day by day, the Progressive loading / Continuous loading or On demand loading is very popular demand these days. In this user doesn't have to click on separate paging links to load the 2nd or 3rd etc. page data. User simply keep scrolling the page to see data and the 2nd page or 3rd page etc. data is loaded automatically from the server and appended to the page.

This gives very sleek and smooth look and feel to the overall page.

Dependency

The knowledge of JavaScript and jQuery is a must to understand this article as we are going to use jQuery to implement this feature.

How to implement?

To implement this functionality, we need to first refer the jQuery file on the page. Now copy-paste below code snippet at the last of the page.

    <div id="divContent">
        The default page (1st page) content is loaded on page on Page_Load
    </div>
    <div id="divLoading" style="padding:10px;color:red;display:none;">Loading .....</div>

In the above code snippet, we have two div
  1. The first div - divContent - is a placeholder where the default data will be loaded and more data from server gets appended as and when it comes.
  2. The second div - divLoading - is an alert message to the user that the data is being load, please wait.
Let's see the jQuery code now

<script type="text/javascript">
        var pageNumber = 1;
        $(window).scroll(function () {
            // if the scroll position is at the bottomm of the page
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {

                $('div#divLoading').show(); // alert the user and show the Loading message

                // fire jQuery ajax
                $.ajax({
                    url: "/getMoreData/?page=" + pageNumber,
                    success: function (html) {
                        if (html) {
                            $("#divContent").append(html); // append the data came from server
                            $('div#divLoading').hide(); // hide the Loading... message
                            pageNumber++; // increment the page number for next request
                        } else { // no data found
                            $('div#divLoading').hide(); // hide the Loading... message
                        }
                    }
                });
            }
        });
    </script>

In the above code, first we have declared a JavaScript variable named pageNumber that works as a flag for us. Its value will be sent to the server to get data of that specific page.

When the vertical scroll position (scrollTop) of the window is equal to the height of readable area of the web page, the divLoading element is shown so that the "Loading ..." message appears.

Then .ajax request is send to the page with the value of pageNumber variable. If the request is successful, the data returned from server is appended to the first div (divContent) and the divLoading element hides. We also increment the value of pageNumber so that next request goes for another page of data from server.

If the returned data is empty, then we simply hide the divLoading element.

Server side code

Server side code of getMoreData simply accepts the page as querystring and gets data from database based on page value and returns the data. Please note that this page doesn't return <html><body> element. 

This page should only return raw data (like tabular data).

Hope this article helps.

Thanks for reading. Keep visiting, learning and sharing knowledge.

Recommendation
Read Consuming Restful Web API in ASP.NET MVC? after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)