jQM - Dynamically populate listview on bottom scroll - New version

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page">
        <div data-role="content">
            <ul data-role="listview" id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript

var timer    = setInterval(function () { scrollOK = true; }, 100);
var scrollOK = true;
var count    = 20;

$(window).on('scroll', function () {
    if (scrollOK) {
        scrollOK = false;
        if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 5)) {
           // Load content here 
           $.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!');
                }
            });
        }
    }
});

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