Looking for a way to dynamically add more lists to the bottom of jQuery Mobile listview

Question

I am looking for a way to add more lists to the bottom of my listview after scrolling down. For instance, I have a return of 20 items initially. I was going to use a paginat

Answer 1

This is example might help out:

http://jsfiddle.net/dhavaln/nVLZA/

// load test data initially
for (i=0; i < 20; i++) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview('refresh');


// load new data when reached at bottom
$('#footer').waypoint(function(a, b) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>"));
    $("#list").listview('refresh');
    $('#footer').waypoint({
        offset: '100%'
    });
}, {
    offset: '100%'
});​

Answer 2

Instead of automatically loading more list-items, I suggest placing a button users can tap to load more (but that's just my suggestion).

//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired
var timer    = setInterval(function () {
        scrollOK = true;
    }, 100),//run this every tenth of a second
    scrollOK = true;//setup flag to check if it's OK to run the event handler
$(window).bind('scroll', function () {

    //check if it's OK to run code
    if (scrollOK) {

        //set flag so the interval has to reset it to run this event handler again
        scrollOK = false;

        //check if the user has scrolled within 100px of the bottom of the page
        if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
            //now load more list-items because the user is within 100px of the bottom of the page
        }
    }
});

Here is a demo: http://jsfiddle.net/knuTW/

Update

It's a bit easier to just load a button that the user can tap, then when it's tapped, load more rows and then re-append the load-more button to the end of the list:

var $loadMore = $('ul').children('.load-more');
$loadMore.bind('click', function () {
    var out = [];
    for (var i = 0; i < 10; i++) {
        out.push('<li>' + (count++) + '</li>');
    }
    $('ul').append(out.join('')).append($loadMore).listview('refresh');
});​

Here is a demo: http://jsfiddle.net/knuTW/2/

Answer 3

There are a few articles describing methods for "forever scroll" and "infinite scroll" which is what it sounds like you're asking about.

The idea behind them is to load asynchronously more data when the user scrolls down to a predetermined number of items from the bottom.

There is a known issue with that method though, in that it makes a liar out of the scroll bar itself.

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://masonry.desandro.com/demos/infinite-scroll.html
http://designbeep.com/2011/08/12/12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation/ http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/