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!

Continuate

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/

Kulp

Thanks so much Jasper! I'll give this a whirl. I was thinking that I'll have to add a button and still may. – Continuate

@urbanrunic I added an update to my answer to show how easy it is to do this with a button rather than automatically. – Kulp

Thank you Jasper! I am having issues with the infinite-scroll not wanting to work. May be that it's a multipage design I have to work with. But I'll try this with the button :) – Continuate

This works great except I'm having an issue with my case where the "Load more" button is multiplying and not appending to the end. I can paste the code here if you'd like – Continuate

@urbanrunic You should create another question. If you tag it with jQuery-Mobile then I'll see it, otherwise post a link to it here. – Kulp

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%'
});​

Jacquelinejacquelyn

Yes, that is exactly what I was looking for...what you have in that example. I'll let you know how it works :) – Continuate

Could you elaborate on the code in your fiddle? Perhaps a link to the plugin's website? – Kulp

waypoint is a really simple plugin which fires an event whenever you reach (scroll down) to the selector element. check imakewebthings.com/jquery-waypoints and github.com/imakewebthings/jquery-waypoints for more detail – Jacquelinejacquelyn

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/

Sectarianize

Ahh, thanks @jefferyhamby. I'll read through these links. I think this would be very nice to have but may, as I mentioned, just have to go with a "view more" button at the bottom of the list. – Continuate