Append more content when scroll to end of page

Question

Hi I only started working on JQuery Mobile a month ago and my starting project was to build an app to load my blog posts. After spending days and night researching and support from SO, I did manage to get my blog posts loaded and also added a Load More link to append new contents.

My intention no is rather than use a link, I want the new contents appended when I scroll to end of page. I do not plan to use a plugin for now but was hoping I could write a simple code to do that for me. This is my current code (First function to load initial contenst while the 2nd function is to append more contents. Not sure if this is the best approach but like I said, I am still in learning process)

$(document).on('pagebeforeshow', '#blogposts', function () {
    $.ajax({
        url: "http://howtodeployit.com/?json=recentstories",
        dataType: "json",
        beforeSend: function () {
            $('#loader').show();
        },
        complete: function () {
            $('#loader').hide();
        },
        success: function (data) {
            $('#postlist').empty();
            $.each(data.posts, function (key, val) {

                //Output data collected into page content
                var rtitle = $('<p/>', {
                    'class': 'vtitle',
                    html: val.title
                }),
                var rappend = $('<li/>').append(rtitle);
                $('#postlist').append(rappend);
                return (key !== 5);
            });
            $("#postlist").listview().listview('refresh');
        },
        error: function (data) {
            alert("Service currently not available, please try again later...");
        }
    });
});

$(document).on("click", ".load-more", function () {
    $.getJSON("http://howtodeployit.com/?json=recentstories", function (data) {
        var currentPost = $('#postlist');
        console.log(currentPost);
        loadMore = currentPost.parent().find('.load-more');
        var currentPostcount = $('#postlist li').length;
        console.log(currentPostcount);
        var desiredPosts = 3;
        newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts);
        $.each(newposts, function (key, val) {
            var rtitle = $('<p/>', {
                'class': 'vtitle',
                html: val.title
            }),
            var rappend = $('<li/>').append(rtitle);
            $('#postlist').append(rappend);
            $("#postlist").listview('refresh');

        });
    });
});

Sorry if this type of question had been answered else where. Please post link

Answer 1

Try this example it works.

function loaddata()
{
    var el = $("outer");
    if( (el.scrollTop + el.clientHeight) >= el.scrollHeight )
    {
        el.setStyles( { "background-color": "green"} );
    }
    else
    {
        el.setStyles( { "background-color": "red"} );
    }
}

window.addEvent( "domready", function()
{
    $("outer").addEvent( "scroll", loaddata );
} );

Fiddle is

http://jsfiddle.net/wWmqr/1/

Answer 2

This is a typical approach with jquery,

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
         /*end reached*/
        $('.content').html($('.content').html()+"more</br></br></br></br>");
    }
});

example with jqm, http://jsfiddle.net/F5McF/