javascript - Youtube api -how to return nextpage token from fuction? -


using youtube api playlist items. there more 50 in list need build loop them. when button clicked i'm calling function return 50 @ time build loop items.

having problems returning nextpagetoken function. couldn't figure out way return data got point i've plugged nextpagetoken html of div inside function but, once function finishes when try html value returns blank.

the console.log('nextpagetoken: ' + data.nextpagetoken); command shows correct value.

the console.log('after call: ' + next); command shows blank value.

also, 'after call' command appears in console log before 'nextpagetoken' log.

any received. here's javascript , html:

$(document).ready(function() {     var loop=0;     var data;     var next='';  $('#get').click(function(){     getvids();     next=$('#pagetoken').text();      console.log('after call: ' + next); });            function getvids(page){     $('#results').html("");     data = {               part: 'snippet',               maxresults: 50,               playlistid: 'playlist',               key: 'mykey',               pagetoken: page             };     $.get(       "https://www.googleapis.com/youtube/v3/playlistitems", data,       function(data){         var output;         console.log('page: ' + data.nextpagetoken);         $.each(data.items, function(i, item)             {               console.log(item);               videotitle = item.snippet.title;               rvideoid = item.snippet.resourceid.videoid;               vidthumburl = item.snippet.thumbnails.high.url;               output = '<li style="list-style:none;">' + rvideoid + ' <a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoid + '">' + videotitle + '<a/></li>';               //append results list               $('#results').append(output);             });         console.log('nextpagetoken: ' + data.nextpagetoken);         $('#pagetoken').html(data.nextpagetoken);        });          }    });  

here's html:

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <title>untitled document</title>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous">     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script src="yt.js"></script>   </head>   <body>     <div id="container">  <button id='get' type="button" class="btn btn-primary">go</button>            <ul id="results"></ul>       <div id='pagetoken'></div>       </div>     </div>    </body> </html> 


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -