Thursday, 13 March 2014

Load result on scroll using jquery.

JAVASCRIPT : 

var sIndex = 10, offSet = <%=offSet %>, isPreviousEventComplete = true, isDataAvailable = true;
$(document).scroll(function () {
        if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
            $('#loadMsg').hide();
            if (isPreviousEventComplete && isDataAvailable) {
                isPreviousEventComplete = false;
                $('#loadMsg').show();              
                $.ajax({
                    type: "GET",
                    url: 'ResultAjax.aspx?startIndex=' + sIndex + '&offset=' + offSet + '',
                    success: function (result) {
                        $("#result").append(result);
                        $('#loadMsg').hide();
                        sIndex = sIndex + offSet;
                        showFltrdResult();
                        isPreviousEventComplete = true;

                        if (result == '') { //When data is not available
                            isDataAvailable = false;
                            $('#loadMsg').hide();
                        }
                    },
                    error: function (error) {
                        $('#loadMsg').hide();
                        alert(error);
                    }
                });

            }
        }
    });  

Write required html in ResultAjax.aspx page.

No comments:

Post a Comment