jQM - Dynamically Populate Listview from JSON

by Alex Azuero

HTML

<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">
<script src="http://example.gajotres.net/iscrollview/iscroll.js"></script>
<script src="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>        
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-theme="a" data-role="header">
                <h3>
                    Movie List
                </h3>
            </div>        
            <div data-role="content">
                <div class="example-wrapper" data-iscroll>
                    <input name="movie-title" id="movie-title" value="" type="text" placeholder="Enter Movie Title"/>            
                    <a href="#" class="ui-btn" id="search-movie">Search</a>
                    <script id="movies-template" type="text/x-handlebars-template">
                        {{#.}}
                        <li><a data-id="{{this.id}}"><img src="{{this.poster_path}}"/><h3>{{this.title}}</h3><p>{{this.release_date}}</p></a></li>
                        {{/.}}
                    </script>                      
                    <ul data-role="listview"  id="movie-list" data-theme="a">
                        
                    </ul>
                </div>
            </div>            
        </div>
        <div data-role="page" id="headline">
            <div data-theme="a"...

CSS

.ui-content {
    padding: 0 !important;
}
 
.ui-listview {
    margin: 0 !important;
}
 
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}

JavaScript

$(document).on('pageinit', '#home', function(){      
    
    $(document).on('click', '#search-movie', function(){ 
        if($('#movie-title').val().length > 0) {
            var url = 'http://api.themoviedb.org/3/',
                mode = 'search/movie?query=',
                movieName = '&query='+encodeURI($('#movie-title').val()),        
                key = '&api_key=5fbddf6b517048e25bc3ac1bbeafb919';        
            
            $.ajax({
                url: url + mode + key + movieName ,
                dataType: "jsonp",
                async: true,
                success: function (result) {
                    ajax.parseJSONP(result);
                },
                error: function (request,error) {
                    alert('Network error has occurred please try again!');
                }
            });          
        } else {
            alert('Please enter mobie title!');
        }       
    });        
});

$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            var movieHandler = Handlebars.compile($("#movie-template").html());
            $('#movie-data').html(movieHandler(row));                
        } 
    });          
    $('#movie-data').listview('refresh');     
});

$(document).on('vclick', '#movie-list li a', function(){  
    movieInfo.id = $(this).attr('data-id');
    $.mobile.changePage( "#headline", { transition: "slide", changeHash: false });
});

var movieInfo = {
    id : null,
    result : null
}

var ajax = {  
    parseJSONP:function(result){  
        movieInfo.result = result.results;
        $('#movie-list').empty(); 
        var movieListHandler = Handlebars.compile($("#movies-template").html());
        $('#movie-list').html(movieListHandler(result.results));         
        $('#movie-list').listview('refresh');
    }
}