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 pagination and just return as many as come back from my query, BUT I'd rather return 15-20 then at the end of scrolling either automatically add more to this list or have a button saying "view more". I'm new with jQuery Mobile and wondering if anyone has seen this sort of thing implemented. This is also being used in Phonegap. If so can you point me in the right direction? Much thanks in advance!

Answer 1

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 2

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 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/