Scrolling Pagination on Gridview via JQuery - Help - asp.net

Question

Having some problems with a solution that apparently works:
<script type="text/javascript" >
//following code utilizes jQuery 1.2.6
var prev = 0;
$(document).ready(
//DIV showing the message "Loading..." is hidden initially
//The message will be shown when records are fetched with AJAX
//when user has scrolled to the bottom of the DIV scrollbar
function() {
$(".divProgress").hide();
$(".divLeft").scroll(
function() {
//triggering point is when the difference of the heights of the TABLE
//and DIV match the DIV's scrollTop value
if ($('<%=grdPersonResults.ClientID %>').height() - this.scrollTop == $(this).height()) {
//progress bar
$(".divProgress").ajaxStart(function() {
$(this).show();
});
$(".divProgress").ajaxStop(function() {
$(this).hide();
});
//get last Order Id to track next fetch
var OrderIdLast = $('<%=grdPersonResults.ClientID %> tr:last').children("td:first").html();
//get last table row in order to append the new result set increment
var trLast = $('<%=grdPersonResults.ClientID %> tr:last');
if (parseInt(OrderIdLast, 10) > parseInt(prev, 10)) {
prev = OrderIdLast;
//make a async call to fetch the incremental results
$.post("AsyncHandler.ashx?lastOrderId=" + OrderIdLast, function(data) {
if (data != null) {
//append new result set to last row
trLast.after(data);
}
});
}
}
});
});
</script>
My Gridview is fairly simple:
<div class="divLeft">
<asp:GridView ID="grdPersonResults" AutoGenerateColumns="False" runat="server"
CellPadding="2" Width="100%" ForeColor="#333333" GridLines="None" BorderWidth="1px" BorderStyle="Solid"
BorderColor="Black" AllowSorting="True" CssClass="box-table-a">
<Columns>
<asp:HyperLinkField HeaderText="Name" SortExpression="NAME" DataNavigateUrlFields="EMPLOYEE_ID, COMPANY_ID, RNUM"
DataNavigateUrlFormatString="~/Admin/FinalizeEdit.aspx?id={0}&cid={1}&rnum={2}&action=EDIT" DataTextField="NAME" />
<asp:BoundField DataField="DESCRIPTION" HeaderText="Company" SortExpression="DESCRIPTION" />
<asp:BoundField DataField="SOURCE_ID" HeaderText="Source" SortExpression="SOURCE_ID" />
</Columns>
<FooterStyle CssClass="box-table-a" />
<RowStyle CssClass="box-table-a" />
<EditRowStyle CssClass="box-table-a" />
<SelectedRowStyle CssClass="box-table-a" />
<PagerStyle CssClass="box-table-a" />
<HeaderStyle CssClass="box-table-a" />
<AlternatingRowStyle CssClass="box-table-a" />
</asp:GridView>
</div>
<div class="divProgress">
Loading....
</div>
It doesn't ever seem to hit my AsyncHandler, not sure if my selectors are wrong since I'm using a Masterpage in ASP.net, but it seems to be picking up the elements.

Answer 1

change
if ($('<%=grdPersonResults.ClientID %>').height() - this.scrollTop == $(this).height()) {
to
if ($("#grdPersonResults").height() - this.scrollTop <= $(this).height()-2) {