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

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('
' + (count++) + '
');
    }
    $('ul').append(out.join('')).append($loadMore).listview('refresh');
});​

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