JQuery Mobile Dynamic Listview API

Question

I'm new to JQuery Mobile and I amm wondering how to create a Dynamic Listview using the API below, and when an item is clicked it will create a new page with more detailed information.

I'm using multiple DIV's for my page content/structure.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script>
var apikey = "myapikey";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

// construct the uri with our apikey
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = "Gone with the Wind";

$(document).ready(function() {

// send off the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: searchCallback
});
});

// callback for when we get back the results
function searchCallback(data) {
$(document.body).append('Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function(index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}

</script>

</head>
<body>
</body>
</html>

Community · Accepted Answer · 2017-05-23 12:22:13Z

Its easy, but you need to head over to the JQM site and learn about Pages http://demos.jquerymobile.com/1.4.5/pages/ -- listviews http://demos.jquerymobile.com/1.4.5/listview/ -- and the listview widget -- https://api.jquerymobile.com/listview/

I created a demo to get you started. You can search for Movies, so insert your API key and click Run on the blue Menu Bar to give it a go. Any Problems, report back as i dont have an API key to test it properly.

If you get any display issues with the rectangular thumbnails rotten tomatoes uses head over here to learn how to fix them https://jqmtricks.wordpress.com/2014/02/13/odd-sized-thumbnails-in-listview/ or here How do I get rid of whitespace under jQuery Mobile Listview thumbnail image

Demo

https://jsfiddle.net/u1LonxLf/

Code

var smovie = "";
$(document).on("click", "#go", function () {
    smovie = $("#movie").val();
    if (smovie) {
    $("#movies").empty();
        var apikey = "myapikey"; // put your key here to test
        var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

        // construct the uri with our apikey
        var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
        var query = smovie;

        // send off the query
        $.ajax({
            url: moviesSearchUrl + '&q=' + encodeURI(query),
            dataType: "jsonp",
            success: searchCallback
        });

        // callback for when we get back the results
        function searchCallback(data) {
            $(".resluts").html('Found ' + data.total + ' results for ' + query);
            var movies = data.movies;
            $.each(movies, function (index, movie) {
                $("#movies").append("<li><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2></a></li>").listview().listview("refresh");
            });
        }
    }
})

JQM Html

<div data-role="page">
    <div data-role="header" data-position="fixed">
            <h1>RottenTomatoes Movie Search</h1>
    </div>

    <div role="main" class="ui-content">
        <input type="search" name="movie" id="movie" value="" placeholder="Movie to  Search..." />
        <input type="button" id="go" value="Search" />
        <div class="resluts"></div>
        <ul data-role="listview" id="movies">  </ul>
    </div>

</div>

As for creating a detailed page when you click an item, there are many ways, one is to add all the info that comes back from the JsonP callback data using the Data attribute. ie

 $("#movies").append("<li data-title='"+ movie.title +"' data-cast='"+ movie.cast +"' data-year='"+ movie.year +"'><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2></a></li>").listview().listview("refresh");

and create another click function for the listview items to gather the data

$(document).on("click", "#movies li", function(event, ui) {

var title = $(this).closest("li").attr('data-title');
var cast  = $(this).closest("li").attr('data-cast');
var year  = $(this).closest("li").attr('data-year');

// and then the rest of the code to append the data to your other page e.g (moviedetails) page 

// and then change to that page. So you will need to add one more page to the html i provided above. Head over to the JQM site to learn about multipage template.

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#moviedetails", { transition: "slide" }); 
})

It seems to work fine on JSFiddle, but not for me personally. When i type something in and click go - nothing happens. I have copied the code, but no luck. Any ideas? Thanks
Take a look at the browsers console. do you see any errors? usually in red. if you dont know how to do that check here -- webmasters.stackexchange.com/questions/8525/…

Collectives™ on Stack Overflow

JQuery Mobile Dynamic Listview API

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related