Infinite Scrolling in Asp.Net MVC with jQuery / AJAX Issues

This is what I ended up doing based on the suggestion :

$(window).scroll(function () {
    var hT = $('#progressmarker').offset().top,
        hH = $('#progressmarker').outerHeight(),
        wH = $(window).height(),
        wS = $(window).scrollTop();
    // don't do it if we have reached last page OR we are still grabbing items
    if (pages >= pageIndex && !_incallback) {
        if (wS > (hT + hH - wH)) {
            GetData();
        }
    }
});

function GetData() {
    _incallback = true;
    $.ajax({
        type: 'GET',
        url: '/category/ListMore',
        data: {
            "id": categoryId,
            "page": pageIndex,
            "sort": sortIndex
        },
        dataType: 'html',
        success: function (data) {
            if (data != null) {
                $("#listmore").append(data);
                pageIndex++;
            }
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
            _incallback = false;
        },
        error: function () {
            //alert("Error while retrieving data!");
            _incallback = false;
        }
    });
}

Seems to work OK now thanks for that.

Leave a Comment