jquery - Multiple asynchronous calls (javascript facebook api) fail -

i using facebooks javascript api , in jquery mobile website , in order download albums , photos facebook public page , present them website.

the api straightforward on how things done , made working easily.

what have done far , working

when user hits button load page , javascript fb api called , dynamically generate list of albums of specific facebook page , photos etc. works great. when api called fetches 25 albums , when have more albums fetch , have "more albums" button user hits make call api , fetch more albums. works great too...

the problem

my problem appeared , when decided want have 2 different facebook pages import albums/photos from. made horizontal button 2 options (facebook page 1 , facebook page 2) , made navbar persistant , when hit 1 of buttons need api call made , albums of each page. sadly doesnt work... when make call 1 of 2 pages , works. "more albums" button works. when navigate other facebook page , call api doesnt work... cant understand why... "more albums" button works , means can make multiple calls api. why when navigate ajax , other page on jquery mobile site , call cant completed? put alert inside javascript file , see , means code called. when put alert inside actual call api , cant see alerted.... guess means reason call blocked...

any ideas might happening here?

my javascript 1 of 2 albums looks :

$('#photosnj').on("pageshow", function() {         var albumphotos = new array();         var albumthumbnails = new array();         var x=0;         var next;         var times=0;         var datalength=0;          // start entire process         window.fbasyncinit = function() {             // init fb js sdk              fb.init({                 appid      : '564984346887426',                                                  // app id app dashboard                 channelurl : 'channel.html',                                                     // channel file x-domain comms                 status     : true,                                                               // check facebook login status                 xfbml      : true                                                                // social plugins on page             });             $.mobile.loading("show");             fb.api('169070991963/albums', checkforerrorfirst(getalbums));             //$.mobile.loading("hide");           }           // checkforerrorfirst wraps function around error checking code first         // if there no response, code not called         // allows write juicy working code          // , not worry error checking         function checkforerrorfirst(myfunc) {             return function(response) {                  if (!response || response.error) {                     alert("error !");                 } else {                     myfunc(response);                 }             };           }          function getalbums(response) {             //if statement checks , if there more albums load. if not disable "more albums" button.             if(response.paging.next == undefined) $("#loadmorealbums").parent().hide();             //variable next holds url next 25(or less) albums             next = response.paging.cursors.after;             datalength = response.data.length + datalength;             (var i=0; < response.data.length; ++i) {                 processalbum(response.data[i], i+x);             }             x = x+i;             console.log(x);         }           function processalbum(album, i) {             fb.api(album.id + "/photos?limit=300", checkforerrorfirst(populatealbum(album, i)));         }           function populatealbum(album, i) {             return function(response) {                 (var k=0; k < response.data.length; ++k){                      albumthumbnails[i] =  albumthumbnails[i]||[];                     albumthumbnails[i][k] = response.data[k].picture;                     albumphotos[i] = albumphotos[i]||[];                     albumphotos[i][k] = response.data[k].source;                 }                 // we've populated album thumbnails , photos, can render album                 fb.api(album.cover_photo, checkforerrorfirst(renderalbum(album, i)));             };         }          function renderalbum(album, i) {             times++;             if(times == datalength) $.mobile.loading("hide");             return function(response) {                 var albumname = album.name;                 var albumcover = album.cover_photo;                 var albumid = album.id;                 var numberofphotos = album.count;                 // render photos                $(".albums").append('<li>'+                '<a href="#gallery' + + '"' + 'data-transition="slidedown">'+                '<img src= "' + response.picture + '"  />'+                '<h2>' + albumname + '</h2>'+                '<p>' + "number of photos:  " + numberofphotos +'</p>'+                '</a>'+                '</li>').listview('refresh');                 $("#photosnj").after('<div data-role="page" data-add-back-btn="true" id=gallery'+ +                ' class="gallery-page"' + ' data-url="gallery' + + '"> ' +                ' <div data-role="header"><h1>gallery</h1></div> ' + ' <div data-role="content"> ' +                ' <ul class="gallery"></ul> ' + ' </div> ' +                ' </div> ');                 for(var n=0; n < albumphotos[i].length; n++) {                     $('#gallery' + + ' .gallery').append('<li><a href="' + albumphotos[i][n]                      + '"  rel="external"><img src="' +  albumthumbnails[i][n] + '"' + '/> </a> </li>');                }                 //adding "more photos" button inside every album                // $('#gallery' + + ' .gallery').after('<button type="button" class="loadmorephotos">more photos...</button>');              };            }          // load sdk asynchronously         (function(d, s, id){             var js, fjs = d.getelementsbytagname(s)[0];             if (d.getelementbyid(id)) {return;}             js = d.createelement(s); js.id = id;             js.src = "//connect.facebook.net/en_us/all.js";             fjs.parentnode.insertbefore(js, fjs);         }(document, 'script', 'facebook-jssdk'));          //"more albums" button         $("#loadmorealbums").click(function(){             // start entire process             window.fbasyncinit = function() {             // init fb js sdk              fb.init({                 appid      : '564984346887426',                                  // app id app dashboard                 channelurl : 'channel.html',                                     // channel file x-domain comms                 status     : true,                                               // check facebook login status                 xfbml      : true                                                // social plugins on page             });             }             //when "more albums" button pressed , make call @ api next 25(or less) albums , using "next" url             $.mobile.loading("show");             fb.api('169070991963/albums?after=' + next +"'", checkforerrorfirst(getalbums));         }); }); 

you can see call api , dynamic creation of html page show albums in listview , population of albums photos , more albums button etc... javascript other facebook page identical , page id changes. @ point , want point out if load other page first , 1 again second call 1 not working. means dont have specific problem 1 of albums , rather problem second call never runs.

here html page in case need see trying do:

<!doctype html>  <html> <head>     <meta charset="utf-8">     <title>jquery mobile web app</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->     <link rel="stylesheet" href="themes/espaciojoven.min.css" />     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>     <link rel="stylesheet" href="themes/custom.css" />      <!--used photoswipe plugin -->     <script type="text/javascript" src="photoswipe/klass.min.js"></script>     <script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>     <script type='text/javascript' src='photoswipe/photoswipecall.js'></script>           <link href="photoswipe/jquery-mobile.css" type="text/css" rel="stylesheet" />     <link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />     <!--used photoswipe plugin -->       <script type='text/javascript' src='javascript/createfb2.js'></script>     <script type='text/javascript' src='javascript/createfb.js'></script>  </head>  <body>   <div data-role="page" id="home" data-theme = "a" >     <div data-role="content">            <h2 id="banner">joven mobile</h2>         <div class="main_menu">             <ul data-inset="true" data-role="listview">                 <li><a href="#espajoven"><img src="themes/icons/news.png" alt="information" class="ui-li-icon">es joven</a></li>                 <li><a href="#nojoven"><img src="themes/icons/research.png" alt="information" class="ui-li-icon">la noche es joven</a></li>                 <li><a href="#photosnj"><img src="themes/icons/staff.png" alt="information" class="ui-li-icon">multimedia</a></li>                 <li><a href="#sanrjoven"><img src="themes/icons/students.png" alt="information" class="ui-li-icon">sar joven</a></li>             </ul>                </div> <!-- /main_menu -->     </div> <!-- /content --> </div> <!-- /page -->  <div data-role="page" id="photosnj" data-theme="a" data-add-back-btn="true" data-back-btn-text="back">     <!--<script type='text/javascript' src='javascript/createfbalbums.js'></script> -->     <div data-role="header" data-id="fixednav" data-position="fixed">         <h1>application title</h1>         <a href="#" data-icon="back" data-rel="back" title="go back">back</a>         <div data-role="navbar">             <ul>                 <li><a href="#photosnj" class="ui-btn-active ui-state-persist">photos noche joven</a></li>                 <li><a href="#photosej">photos esp joen</a></li>                 <li><a href="#videos">videos</a></li>             </ul>         </div> <!-- /navbar -->     </div> <!-- /header -->     <div data-role="content">            <ul data-role="listview" data-inset="true" class="albums">               <!-- here albums created through javascript (createalbums.js) -->         </ul>             <button type="button" id="loadmorealbums">more albums...</button>         </div> <!-- /content -->     <!-- <div id="fb-root"></div> -->  </div>   <div data-role="page" id="photosej" data-theme="a" data-add-back-btn="true" data-back-btn-text="back">     <!--<script type='text/javascript' src='javascript/createfbalbums2.js'></script>-->     <div data-role="header" data-id="fixednav" data-position="fixed">         <h1>application title</h1>         <a href="#" data-icon="back" data-rel="back" title="go back">back</a>         <div data-role="navbar">             <ul>                 <li><a href="#photosnj">photos noche joven</a></li>                 <li><a href="#photosej" class="ui-btn-active ui-state-persist">photos espacio joven</a></li>                 <li><a href="#videos">videos</a></li>             </ul>         </div> <!-- /navbar -->     </div> <!-- /header -->     <div data-role="content">            <ul data-role="listview" data-inset="true" class="albums2">              <!-- here albums created through javascript (createalbums.js) -->         </ul>                 <button type="button" id="loadmorealbums2">more albums...</button>           </div> <!-- /content -->     <!-- <div id="fb-root"></div> --> </div>  </body> </html> 

thank very if decided read till far. any, absolutely comment or idea on 1 super valuable me , please if have thought share me :)

fiddler: http://jsfiddle.net/lessisv/gw4pk/

go multimedia , there have 2 tabs "photos noche joven" , "photos espacio joven". can see first 1 loading normally. if go down can see "more albums" button , works , make calls api. problem when go "photos espacio joven" , call not working reasons described.

first, don't need window.fbasyncinit in loadmorealbums handlers. define same function earlier - enough.

second, don't use fb.init many times - once. because defined inside window.fbasyncinit, , function called facebook sdk when sdk loaded. , there check whether script loaded:

if (d.getelementbyid(id)) {return;} 

that means load fb script once , init fb once.

the main thing cannot init fb object (fb.init) in 1 scope (one of "pageshow event" handlers) , use fb.api in scope (the other handler). why empty result.

there several solutions can try.

1.you can init fb every time page changes.

just check fb object present , call window.fbasyncinit(). try solution changing

if (d.getelementbyid(id)) {return;} 

to

if (d.getelementbyid(id)) {window.fbasyncinit(); return;}  

this ugly way.

2.you should refactor code.

init fb on top level - not in 2 handlers; create 1 handler - , call when page changed. can pass necessary parameters or use dom elements data.

ps. new handler loadmorealbums added every time page changes. switch album, go , 2 calls , double data, switch again , triple data.

$(document).on("pageshow", '#photosnj', function () {    ...      $("#loadmorealbums").click(function () {         ...     });    ... });