1

I'm trying to implement Infinite Scrolling on a gridview to speed up my web application, since the gridview is being bound to a sql query that returns thousands of records at start (it's the client's wish, and I can't change that.)

So I've been following the directions for adding Infinite Scrolling to a gridview found here, and it does work -- the first time the user scrolls to the bottom of the div. The second time, nothing.

Here's the code I'm using to track the div's scroll event. The original code was written for Jquery 1.8.3; I've altered it for Jquery 1.11. I've also added the subsequent methods so you can see what happens when things work.

$("#dvGrid").scroll(function (e) {
    var $o = $(e.currentTarget);
    //if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
    //  GetRecords();
    //}
    if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
        GetRecords();
        console.log('end reached');
    }
});

//Function to make AJAX call to the Web Method
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {

            //Show Loader
            if ($("#resultGrid .loader").length == 0) {
                var row = $("#resultGrid tr").eq(0).clone(true);
                row.addClass("loader");
                row.children().remove();
                row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" /></td>');
                $("#resultGrid").append(row);
            }
            $.ajax({
                type: "POST",
                url: "testPage.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }

    //Function to recieve XML response append rows to GridView
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var mills = xml.find("DBTableName");
        $("#resultGrid .loader").remove();
        mills.each(function () {
            var mill = $(this);
            var row = $("#resultGrid tr").eq(0).clone(true);
            $(".class", row).html(mill.find("data_item").text());

            // rinse, lather and repeat for each data item ...

            $("#resultGrid").append(row);
        });

        //Hide Loader
        $(".loader").hide();
    }

GetRecords is the method that fires my ajax update, and like I said, it works the first time. Extensive breakpointing has shown me that after that first update, I'm no longer able to detect when the user has scrolled to the bottom of the div.

The height of the div doesn't change, but the height of the gridview does: 10 rows get added onto the end of it with the update, taking the row count from 10 to 20. The commented conditional in the scroll() method is the way the original code was checking for reaching the bottom of the div; the second conditional was a way for checking that I got from this SO post, but I'm still running into the same problem, even though the math in that second conditional should evaluate to true every time. Does anyone know what's going wrong?

Community
  • 1
  • 1
bmurrell30
  • 565
  • 8
  • 23

1 Answers1

1

I figured it out. In my conditional to check for reaching the bottom of the div:

if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
    GetRecords();
    console.log('end reached');
}

"$(this).scrollTop()" was returning a fractional result, meaning that after the first update, the statement in the conditional was actually adding up to an amount that was one-tenth of one pixel shy of the total scroll height -- 1109.9 instead of 1110.

So I altered the conditional this way:

if (Math.ceil($(this).scrollTop()) + $(this).innerHeight() >= this.scrollHeight) {
    GetRecords();
}

Now the math works correctly, and the update triggers every time. Egad, I love the learning process :P

bmurrell30
  • 565
  • 8
  • 23