asp.net - Youtube api running fine with html, incorrectly with aspx -
i'm relatively new aspx , tried start moving html page youtube api javascript visual studio , aspx in order move data database. in html page seems work fine , next page button pass pagetoken. however, when moved html code aspx, noticed page seems refresh , drops next page token, reloading same front page. gives me warning code occurs in aspx , not html:
synchronous xmlhttprequest on main thread deprecated because of detrimental effects end user's experience. more help, check http://xhr.spec.whatwg.org/. setting 'xmlhttprequest.withcredentials' synchronous requests deprecated. i not adding scripts using jquerys, believe main cause of warning. nextpage function recall api additional requests.
in terms of moving html aspx copy html code , put header , body respectively. missing step in migrating? have change code when using aspx instead of html?
here current aspx page:
<%@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs" inherits="webapplication1.default" %> <doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="stylesheet1.css" rel="stylesheet" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="javascript1.js"></script> <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onclientload"></script> <style type="text/css"> #courses { width: 566px; } .auto-style1 { width: 556px; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="video-container"> <table><tr> <td class="auto-style1"> <h1> rutgers accounting digital library directory </h1> </td> <td align="right"><div id="summary"></div></td> </tr> <tr><td class="auto-style1"><form action="search_results.asp" method="post"><input type="text" name="search1" placeholder="search here" size="20"><input type="submit" name="submit" value="submit"></form></td><td><form method="link" action="my_uploads.html" ><input type="submit" name="clear" value="clear filters"></form></td></tr> <tr><td colspan="2"> <form> <select id="courses" onchange="show()"> <option selected disabled>select course</option> </select> </form> </td></tr> <div class="button-container"> <tr> <td class="auto-style1"><button id="prev-button" class="paging-button" onclick="previouspage();">previous page</button></td> <td align="right"><button id="next-button" class="paging-button" onclick="nextpage();">next page</button></td> </tr> <tr> <table id="results"></table> </tr> </table> </div> </div> </form> </body> </html> here javascript page:
// define variables used remember state. var playlistid, nextpagetoken, prevpagetoken, status, cid; var totalr = 0; var rpp = 0; var sum; var dur = ''; function onclientload() { gapi.client.load('youtube', 'v3', handleapiloaded); } // after api loads, call function uploads playlist id. function handleapiloaded() { gapi.client.setapikey('apikey'); requestuseruploadsplaylistid(); } // call data api retrieve playlist id uniquely identifies // list of videos uploaded authenticated user's channel. function requestuseruploadsplaylistid() { // see https://developers.google.com/youtube/v3/docs/channels/list var request = gapi.client.youtube.channels.list({ part: 'contentdetails', forusername: 'rutgersweb' }); request.execute(function (response) { cid = response.result.items[0].id; dropdown(cid); playlistid = response.result.items[0].contentdetails.relatedplaylists.uploads; requestvideoplaylist(playlistid); }); } // retrieve list of videos in specified playlist. function requestvideoplaylist(playlistid, pagetoken) { console.log(pagetoken); $('#results').html(''); console.log(pagetoken); var requestoptions = { playlistid: playlistid, part: 'snippet', maxresults: 50 }; if (pagetoken) { requestoptions.pagetoken = pagetoken; } var request = gapi.client.youtube.playlistitems.list(requestoptions); request.execute(function (response) { totalv = response.pageinfo.totalresults; rrp = response.pageinfo.resultsperpage; sum = '<td>results per page: ' + rrp + '</td><td>total pages: ' + math.ceil(totalv / rrp) + '<td>total videos: ' + totalv + '</td>'; $(sum).replaceall('#summary'); // show pagination buttons if there pagination token // next or previous page of results. nextpagetoken = response.result.nextpagetoken; var nextvis = nextpagetoken ? 'visible' : 'hidden'; $('#next-button').css('visibility', nextvis); $('#next-button2').css('visibility', nextvis); prevpagetoken = response.result.prevpagetoken var prevvis = prevpagetoken ? 'visible' : 'hidden'; $('#prev-button').css('visibility', prevvis); $('#next-button2').css('visibility', nextvis); var playlistitems = response.result.items; if (playlistitems) { $.each(playlistitems, function (index, item) { displayresult(item.snippet); }); } else { $('#results').html('sorry have no uploaded videos'); } }); } function getvideodetails(mmp, ddp, yyyyp, dur, vidid, videotitle, used) { var request = gapi.client.youtube.videos.list({ part: 'contentdetails', id: vidid }); request.execute(function (response) { var str = json.stringify(response.result.items[0].contentdetails.duration); str = str.replace(/"/g, ""); str = str.replace(/pt/g, ""); str = str.replace(/h/g, ":"); str = str.replace(/m/g, ":"); str = str.replace(/s/g, ""); str = str.split(':'); var ftime; if (str[1] < 10) { ftime = str[1]; str[1] = '0' + ftime; } if (str[2] < 10) { ftime = str[2]; str[2] = '0' + ftime; } displayoutput(mmp, ddp, yyyyp, str, vidid, videotitle, used); }); } // create listing video. function displayresult(videosnippet) { var videotitle = videosnippet.title; var videoid = videosnippet.resourceid.videoid; var videodescription = videosnippet.description; var videopub = videosnippet.publishedat; //dur = //publishedat formatting compare ar3 = videopub.split("t"); uselessd = ar3[0]; re = new regexp("-", "g"); uselessd2 = uselessd.replace(re, "/"); usedd = uselessd2.split("/"); ddp = usedd[2]; mmp = usedd[1]; yyyyp = usedd[0]; //description trimming leave time stamps ar = undefined; useless = undefined; useless2 = undefined; used = undefined; ar2 = undefined; ar = videodescription.split("time stamps:"); useless = ar[0]; useless2 = ar[1]; if (useless2 != undefined) { ar2 = useless2.split("summary"); ar = ar2[0]; re = new regexp("\n", "g"); useless = ar.replace(re, "<br>"); used = useless; } else used = " "; // outputarray=[mmp, ddp, yyyyp, dur, videoid, videotitle,used] // displayoutput(outputarray); getvideodetails(mmp, ddp, yyyyp, dur, videoid, videotitle, used) } function displayoutput(mmp, ddp, yyyyp, dur, videoid, videotitle, used) { //output = '<tr><td colspan="3" align="right">published on: '+oarray[0]+'/'+oarray[1]+'/'+oarray[2]+'<br>'+dur+'</td></tr><tr><td><img src="http://img.youtube.com/vi/'+oarray[4]+'/1.jpg"></img></td><td><a href="https://www.youtube.com/watch?v='+oarray[4]+'">'+oarray[5]+'</a></td></tr><tr><td colspan="2" align="right">'+oarray[6]+'<hr>'; if (dur[2]) output = '<tr><td colspan="3" align="right">published on: ' + mmp + '/' + ddp + '/' + yyyyp + '<br>length: ' + dur[0] + ':' + dur[1] + ':' + dur[2] + '</td></tr><tr><td><img src="http://img.youtube.com/vi/' + videoid + '/1.jpg"></img></td><td><a href="https://www.youtube.com/watch?v=' + videoid + '">' + videotitle + '</a></td></tr><tr><td colspan="2" align="right">' + used + '<hr>'; else output = '<tr><td colspan="3" align="right">published on: ' + mmp + '/' + ddp + '/' + yyyyp + '<br>length: ' + dur[0] + ':' + dur[1] + '</td></tr><tr><td><img src="http://img.youtube.com/vi/' + videoid + '/1.jpg"></img></td><td><a href="https://www.youtube.com/watch?v=' + videoid + '">' + videotitle + '</a></td></tr><tr><td colspan="2" align="right">' + used + '<hr>'; //append results liststyletype $('#results').append(output); } // retrieve next page of videos in playlist. function nextpage() { console.log(nextpagetoken); requestvideoplaylist(playlistid, nextpagetoken); } // retrieve previous page of videos in playlist. function previouspage() { requestvideoplaylist(playlistid, prevpagetoken); } function dropdown(cid) { var requestoptions = { channelid: cid, part: 'snippet', maxresults: 50 }; var request = gapi.client.youtube.playlists.list(requestoptions); request.execute(function (response) { var plists = response.result.items; if (plists) { $.each(plists, function (index, item) { var drp = document.getelementbyid("courses"); var optn = document.createelement("option"); optn.text = item.snippet.title; optn.value = item.id; drp.add(optn); }); } else; }); } function show() { var e = document.getelementbyid('courses'); var txt = e.options[e.selectedindex].value; requestvideoplaylist(txt); } i know code little messy, still trying better coding habits, , should fix useless variables.
set type="button" on button controls prevent them submitting page each time pressed:
for example, in aspx page use:
<td class="auto-style1"><button type="button" id="prev-button" class="paging-button" onclick="previouspage();">previous page</button></td> <td align="right"><button type="button" id="next-button" class="paging-button" onclick="nextpage();">next page</button></td>
Comments
Post a Comment