CODEWITHSUNDEEP
jqueryajaxasp.net-ajax
f_gulay
f_gulay

Reputation: 121

How to do infinite scroll with ajax?

I use ASP.NET.

I want to show my database posts and comments on my page.I can show them with a function. But i want to add infinite scroll property. When a user scroll the page , the page should be reload and continue. You know iı's like Facebook , Twitter.

How can i do this? This is my code to show data on the page. I searched scroll function in JQuery.but i did not do this together.

      $(function () {
        var posts = jQuery.parseJSON($("#MainContent_hdnPosts").val());
        $("#Post").html("");
        var html = "";
        $.each(posts, function (index, a) {
            html += '<tr><td>' + a.userId + '</td></tr>';

        });
        $("#Post").append(html);
    });

Upvotes: 1

Views: 3090

Answers (1)

user6299088
user6299088

Reputation:

Use Following Code I have give PHP example you do backend in ASP.NET:

ON LOAD

 $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        var last_id = $("#ticketHistoryData a:last-child").attr('id');
        loadMoreData(last_id);
    }
});
**

FUNCTION LOAD MORE DATA

function loadMoreData(last_id) {
    $.ajax(
        {
            url: '../../controllers/support/fetch_hdata.php?last_id=' + last_id ,
            type: "get",
            beforeSend: function () {
                $('.ajax-load').show();
            }
        })
        .done(function (data) {
             $('.ajax-load').hide();
            $("#ticketHistoryData").append(data);
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('server not responding...');
        });
}

At the controller you receive ID and select data greater that current received ID

select * from data where id < '" . $lastId . "' ORDER BY id DESC LIMIT 10;

Upvotes: 3

Related Questions