Api help.

ساخت وبلاگ

آخرین مطالب

امکانات وب

Api help.

Developing a mobile app about Films using The MovieDB API.

I've got the code so it randomises a film, the only problem I have is that it doesn't display on the main page.

Code is

Code:
$(document).on('pageinit', '#home', function(){
// $(document).ready(function(){
    console.info('hi');
      var latestUrl = 'https://api.themoviedb.org/3/movie/latest?',
    singleUrl = 'https://api.themoviedb.org/3/movie/'
    mode = 'search/movie?query=',
    key = '&api_key=***',
    latestId = 0,
    targetId = 0;
    $.ajax({
        url: latestUrl + key ,
        dataType: "jsonp",
        async: true,
        success: function (result) {
            console.dir(result);
            // ajax.parseJSONP(result);
            latestId = result.id;
            console.dir(latestId);
            targetId = Math.floor(Math.random() * latestId);
            console.dir(targetId); 
            callFilmId(targetId);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });
    // get random id


});


function callFilmId(tid){

$.ajax({
        url: "https://api.themoviedb.org/3/movie/"+tid+"?api_key=***&language=en-US",
        dataType: "jsonp",
        async: true,
        success: function (result) {
            console.dir(result);
            if(result.status_code == 34){
                callFilmId(tid+1);
            }
            // ajax.parseJSONP(result);
        },
        error: function (request,error) {
          // alert('Network error has occurred please try again!');
            callFilmId(tid+1);
        }
    });


}


$(document).on('pagebeforeshow', '#headline', function(){
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            $('#movie-data').append('<li><img src="http://image.tmdb.org/t/p/w92'+row.poster_path+'"></li>');
            $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
            $('#movie-data').append('<li>Overview <br>'+row.overview+'</li></br>');
            $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');
            $('#movie-data').listview('refresh');
            $('#movie-data').append('<li>Release Date'+row.primary_release_year+'</li>');
        }
    });
});

$(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;
        $.each(result.results, function(i, row) {
            console.log(JSON.stringify(row));
            $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="http://image.tmdb.org/t/p/w92'+row.poster_path+'"/><h3>' + row.title + '</h3><p>')
    })
    }
}
my html page code

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css.css"/>
    <link rel="stylesheet" href="jquery.mobile-1.4.2.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <script src="API.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title></title>
</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>
            <ul data-role="listview"  id="movie-list" data-theme="a">
            </ul>
        </div>
    </div>
    <div data-theme="a" data-role="footer">
     
    </div>
</div>
<div data-role="page" id="headline">
    <div data-theme="a" data-role="header">
        <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>
        <h3>
            Movie Info
        </h3>
    </div>
    <div data-role="content">
        <ul data-role="listview"  id="movie-data" data-theme="a">

        </ul>
    </div>
</div>



</body>
</html>
if anyone can help let me know :)
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 183 تاريخ : جمعه 20 بهمن 1396 ساعت: 16:05

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه