Loading data by scrolling in jQuery
16:56
Introduction
In this articales I want to show how to load old data by scrolling using jQuery. This functionality we see in the facebook messenger.Create Project
File > New > Project > ASP.NET MVC 4 Web Application > Basic > OKController
Right click on the controller > Add > Controller and create TestController. Controller code is given below:using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Scrolling_Load_Data_Jquery.Controllers
{
public class TestController : Controller
{
public ActionResult Index()
{
return View();
}
int counter = 0;
public JsonResult GetDataFromServer()
{
System.Threading.Thread.Sleep(1000);
string resp = string.Empty;
for (int i = 1; i <= 10; i++)
{
resp += "
Scrolling load data using jquery " + counter++ + "
";
}
return Json(resp, JsonRequestBehavior.AllowGet);
}
}
}
Views
Right click on the Index action method > Add view > Add. Views code is given below:@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Scrolling Load Data</title>
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
var $contentLoadTriggered = false;
$('#messageArea').scroll(function () {
if ($("#messageArea").scrollTop() >= ($("#divMessage").height() - $("#messageArea").height()) && $contentLoadTriggered == false) {
$contentLoadTriggered = true;
$.ajax({
url: '/Test/GetDataFromServer',
type: "GET",
async: true,
cache: false,
beforeSend: function () {
$('#loader-icon').css('display', 'block');
},
complete: function (msg) {
$('#loader-icon').css('display', 'none');
},
success: function (msg) {
$('#divMessage').append(msg);
$contentLoadTriggered = false;
},
error: function () { }
});
}
});
});
</script>
<style>
#messageArea {
width: 280px;
overflow-y: scroll;
height: 300px;
border: #5f9482 solid 3px;
padding: 7px;
}
.message {
padding: 4px;
}
.loader {
display: none;
position: absolute;
margin-left: 98px;
margin-top: 120px;
}
</style>
</head>
<body>
<div style="margin-left: 41%; margin-top: 10%;">
<h1>Scrolling Load Data</h1>
<div id="messageArea">
<img id="loader-icon" src="~/loader.gif" class="loader" />
<div id="divMessage">
<div class="message">Scrolling load data using jquery 1</div>
<div class="message">Scrolling load data using jquery 2</div>
<div class="message">Scrolling load data using jquery 3</div>
<div class="message">Scrolling load data using jquery 4</div>
<div class="message">Scrolling load data using jquery 5</div>
<div class="message">Scrolling load data using jquery 6</div>
<div class="message">Scrolling load data using jquery 7</div>
<div class="message">Scrolling load data using jquery 8</div>
<div class="message">Scrolling load data using jquery 9</div>
<div class="message">Scrolling load data using jquery 10</div>
<div class="message">Scrolling load data using jquery 11</div>
<div class="message">Scrolling load data using jquery 12</div>
<div class="message">Scrolling load data using jquery 13</div>
<div class="message">Scrolling load data using jquery 14</div>
<div class="message">Scrolling load data using jquery 15</div>
<div class="message">Scrolling load data using jquery 16</div>
<div class="message">Scrolling load data using jquery 17</div>
<div class="message">Scrolling load data using jquery 18</div>
<div class="message">Scrolling load data using jquery 19</div>
<div class="message">Scrolling load data using jquery 20</div>
</div>
</div>
</div>
</body>
</html>
Run the application. We see the screen in the browser below:
Now if we scrolling the data will loading and show like below:
0 comments