On scroll load data without refresh through Javascript

This article will discuss how to load data from server on scroll event of a page. We can see this feature on most of the sites like facebook and other shopping sites also. When we scroll down to the page data loaded by it self without refreshing the page. This feature can improve the user experience to the very high level.

First of all we need html with container div with data list div. we are going to load data from server through client side Javascript/Jaquery and server side c# Webmethod. Here we fetching data by webmethod and binding it with jquery.
But when we do this if we store id of data row at server side, it will create some problem when we go to next page and came back with browser back button.
That's why we are binding data row id to div and read it when we require.

In below html we are using 'loaddiv' to append data on page. On page load we are binding data through asp.net normally.

<!--/********************** Html **************************/--> <div id="loaddiv"> <div id="1" class="idholder"> Some data frome server1 </div> <div id="2" class="idholder"> Some data frome server2 </div> <div id="3" class="idholder"> Some data frome server3 </div> <div id="4" class="idholder"> Some data frome server4 </div> <div id="5" class="idholder"> Some data frome server5 </div> </div>


Now given below is javascript for calling asp.net webmethod and appending response to loaddiv. We reading data id of last list div and passing it to the webmethod.

JS for onscroll load data from asp <script type="text/javascript"> $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { loaddata(); } }); $contentLoadTriggered = false; function loaddata() { $contentLoadTriggered = true; idfecht = $('.idholder:last').attr('id'); $.ajax( { type: "POST", url: "<%= ResolveUrl("~/yourpage.aspx/GetDataFromServer")%>", data: '{divIndex: ' + idfecht + '}', contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { if (msg.d == "") { document.getElementById('btnmore').style.display = 'none'; } else { loaddata2(); $("#loaddiv").append(msg.d); $contentLoadTriggered = false; } } } </script> Webmethod will be something like this. You can write it in your way. But do not forget to bind data row id to the list div. [WebMethod] public static string GetDataFromServer(int divIndex) { int n = 100; string resp = ""; CLSyourclass object = new CLSyourfunction(); DataSet ds = new DataSet(); string searchval = HttpContext.Current.Session["preifxtext1"].ToString(); ds = objrec.Sel_morerecipebyidforAll(divIndex.ToString(), searchval); if (ds.Tables[0].Rows.Count > 0) { for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++) { string divid= ds.Tables[0].Rows[i]["recipe_id"].ToString(); counter = Convert.ToInt32(divid); decimal rid = Convert.ToDecimal(divid); counter = rid; string yourstring = ds.Tables[0].Rows[i]["your column"].ToString(); resp += @" <div href='" + src.Replace("~/", "") + "' class='idholder' id='" + divid + "'>"+your next data+" </div> "; } return resp; } else { return resp; } }