Databases
StackOverflow2013
Postsdbo
POFB.api only loads on first AJAX call to page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFB.api only loads on first AJAX call to page
    text
    copied!<p>I have an issue with an FB.api only loading the first time a page is retrieved via AJAX. FB.getLoginStatus does work though.</p> <p>Demo page: <a href="http://proof.ptly.com/test/fb/test-ajax.htm" rel="nofollow">http://proof.ptly.com/test/fb/test-ajax.htm</a> (clicking the load link works the first time but fails the second time it is clicked)</p> <p><strong>Expected/Desired behaviour</strong>: after giving permission to the app, it should list of all groups or pages associated to the user</p> <p><strong>Current behaviour</strong>: group list is only populated on first load. subsequent clicks do not load the list (FB.api does not return a response - view console for logging)</p> <p>The reason behind this problem is that the page I am retrieving (test.htm) can't be changed but the page I am calling it from (test-ajax.htm) can. While I know this method isn't pretty nor ideal, I'm wondering if it is possible to overcome. Thus suggestions to change the underlying test.htm, while correct, won't solve the problem I'm having. </p> <h2>Sample code</h2> <p>Main page that calls the AJAX page</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;My Facebook Login Page&lt;/title&gt; &lt;script type="text/javascript" language="javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script&gt; var loaded = false; jQuery(document).ready(function(){ jQuery("#lnk").click(function(e){ e.preventDefault(); jQuery("#divContent").load("test.htm", function(){ if(loaded) { FB.getLoginStatus(FBverifyLogin); } else { loaded = true; } }); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="#" id='lnk'&gt;load&lt;/a&gt; &lt;div id='divContent'&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>AJAX page being retrieved</p> <pre><code> &lt;script type="text/javascript"&gt; var FB_config = { API_ID: "347798778614308", PERMISSIONS: "publish_stream,manage_pages,user_groups", }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); jQuery(document).ready(function(){ // initialise FB window.fbAsyncInit = function() { FB.init({ appId : '347798778614308', status : true, cookie : true, xfbml : true, oauth : true }); FB.Event.subscribe('auth.statusChange', FBverifyLogin); }; }); function FBverifyLogin(response) { console.log("FBverifyLogin"); console.log(response); jQuery("#FBreauth").hide(); if (response.status === 'connected') { // the user is logged in and has authenticated your // app, and response.authResponse supplies // the user's ID, a valid access token, a signed // request, and the time the access token // and signed request each expire var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; ShowPostToFacebookCheckbox(); FBdisplayMyPages(response.authResponse); jQuery("#btnLogin").hide(); checkPermissions(); } else if (response.status === 'not_authorized') { } else { // the user isn't logged in to Facebook. jQuery("#btnLogin").show(); return false; } } function checkPermissions(){ console.log("checkPermissions"); FB.api('/me/permissions', function(response) { console.log("in checkPermissions fb.api"); console.log(response); var permissions = FB_config.PERMISSIONS.split(","); for(var i = 0; i &lt; permissions.length; i++) { if(response.data[0][permissions[i]] == undefined || response.data[0][permissions[i]] != 1) { jQuery("#FBreauth").show(); break; } } }); } function FBdisplayMyPages(authResponse){ console.log("FBdisplayMyPages"); console.log(authResponse); FB.api('/me/accounts', function(response) { console.log("in FBdisplayMyPages fb.api"); console.log(response); var str = ""; var name = ""; var count = 0; str += '&lt;optgroup label="Pages"&gt;'; for(var i = 0; i &lt; response.data.length; i++) { if(response.data[i].category != "Application") { name = response.data[i].name; str += '&lt;option value="'+response.data[i].id+"_"+response.data[i].access_token+'"&gt;'+name+'&lt;/option&gt;'; count++; } } str += "&lt;/optgroup&gt;"; jQuery("#msgPostOn").html(str); FB.api('/me/groups', function(response) { console.log("in FBdisplayMyPages fb.api 2"); console.log(response); str = jQuery("#msgPostOn").html(); str += '&lt;optgroup label="Groups"&gt;'; name = ""; for(var i = 0; i &lt; response.data.length; i++) { if(response.data[i].category != "Application") { name = response.data[i].name; str += '&lt;option value="'+response.data[i].id+"_"+authResponse.accessToken+'"&gt;'+name+'&lt;/option&gt;'; count++; } } str += "&lt;/optgroup&gt;"; jQuery("#msgPostOn").html(str); switch(count) { case 0: // notify that there are not pages. will post to personal page str += '&lt;option value="' + authResponse.userID + "_" + authResponse.accessToken + '"&gt;Personal Account&lt;/option&gt;'; jQuery("#msgPostOn").html(str); jQuery("#FBpostTo").text("No pages found. Posting to your personal account"); jQuery("#FBpostTo").show(); break; case 1: // only 1 page. hide it... // notify name of page to update jQuery("#msgPostOn").hide(); jQuery("#FBpostTo").html("Posting to &lt;strong&gt;" + name + "&lt;/strong&gt;"); jQuery("#FBpostTo").show(); break; default: // notify user to select a page to post to jQuery("#FBpostTo").text("There are multiple groups/pages associated with your account. Specify which to post to "); jQuery("#FBpostTo").show(); jQuery("#msgPostOn").show(); } }); }); } function FBrefresh(){ console.log("FBrefresh"); FB.getLoginStatus(FBverifyLogin); } function FBreauth(){ console.log("FBreauth"); FB.ui( { method: 'oauth', display: 'popup', app_id: FB_config.API_ID, client_id: FB_config.API_ID, redirect_uri: "http://www.facebook.com/connect/login_success.html", scope: FB_config.PERMISSIONS } ); } function ShowPostToFacebookCheckbox() { console.log("ShowPostToFacebookCheckbox"); jQuery('#postToFacebook2').css('display', 'inline'); jQuery('#LabelForFacebook').css('display', 'inline'); } &lt;/script&gt; &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;div id="postToFacebookField" class="fieldContainer checkbox "&gt; &lt;div id="btnLogin" class="fb-login-button" scope="publish_stream,manage_pages,user_groups"&gt;Login with Facebook&lt;/div&gt; &lt;input type="checkbox" style="display:none" name="postToFacebook2" value="on" id="postToFacebook2"&gt; &lt;label style="cursor: pointer; display:none" for="postToFacebook2" id="LabelForFacebook"&gt;Post to Facebook Page&lt;/label&gt; &lt;div id="FBpostTo" style="display: none"&gt;&lt;/div&gt; &lt;select id="msgPostOn" style="display: none"&gt;&lt;/select&gt; &lt;div style="display: none" id="FBreauth"&gt;(Insufficient permissions. &lt;a href ='#' onclick='FBreauth(); return false;'&gt;Authorize this app&lt;/a&gt; and &lt;a href='#' onclick='FBrefresh() ; return false'&gt;refreshing&lt;/a&gt;)&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload