jQM - Waypoints Demo - Dynamic append demo

by Dragan Gaić

HTML

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<div data-role="page">
    <div id="header" data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div class="content-primary">    
            <ul data-role="listview" id="list">
            </ul>
        </div>
    </div><!-- /content -->
    
    <div id="footer" data-role="footer">
        <h1>My Footer</h1>
    </div><!-- /header -->

</div><!-- /page -->

JavaScript

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

$('#index').live('pagebeforeshow',function(e,data){        

});


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