How to implement load more function in android using phonegap?

Question

I have an application in which i am displaying items coming from service. Here i have around 200 items to display which is some what hard to see.

Here i want to display load more functionality by displaying first 20 and on click of load more it will show next 20 and so on. I am not able to find a way to how to implement this if anyone has idea please help me.

Answer 1

Loading 200 items and storing them is not a good approach with phonegap/cordova. We are talking about already slow HTML5 + JS wrapper, this will make it even more slow.

Better approach would be to use a ajax to load more data, ajax call will be triggered when you reach a listview end or when a "load new content" button is clicked.

Here you will find an approach with "load new content" button:

http://jsfiddle.net/knuTW/2/

Here you will find an approach with auto loading listview when listview end is reached:

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

This example requires this jQuery plugin: http://imakewebthings.com/jquery-waypoints/

And here's my example with auto loading listview and $.ajax in commbination:

http://jsfiddle.net/Gajotres/v4NxB/

Code example, and I repeat this is only a dummy example (still working dummy example):

// load test data initially
for (i=0; i < 10; 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) {
    // Load some dynamic data with $.ajax
   $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            //alert('Network error has occurred please try again!');
        }
    });    
    $('#footer').waypoint({
        offset: '100%'
    });
}, {
    offset: '100%'
});

var ajax = {  
    parseJSONP:function(result){
        //var jsonObj = jQuery.parseJSON(parameters);
        $("#list").append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $("#list").append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $("#list").append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $("#list").append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $("#list").append('<li>Released:<span> ' + result[0].released+ '</span></li>');        
        $("#list").listview('refresh');
    }
}

You also need to prevent another $.ajax call before last one is over.