facing trouble to trigger multiple onload event to work FBJS does not allow acess to the window object. So how can onload event fire when <div> is loaded on canvas. also FBJS is executed after the entire page has been loaded. so really shouldn’t matter where you call the function within your canvas page file. however let’s see how can we trigger on load for multiple div.

In this example we create two div which load by onload. One <div=’msg’> is for content a message and another <div=’ ajax’> which load the value by ajax way.

For that reason in FBJS we create a varraible array and pushing two functions on that array variable.

var onload = [];

onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

</script>

now we define the two functions. The message load function just simply display a text message on <div id=’msg’>. and do_ajax() function display the value by ajax call.

<script>
function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('http://www.techsmashing.com/banglakeyboard/adduser.php');
}            ajax.post(.....display.php'); // ajax callback url
}</script>

now we trigger on the onload event . by pushing functions into an array and executing them at the bottom of the page it ensures that the elements are indeed in the dom tree.  here we add setTimeout function to to make sure the browser is fully loaded. It allows 100 miliseconds. because the rest of the page to load (facebook footer and such).   increasing the 100 milisecond limit can solve some of these problems.

</p></p>

<script>
//the very last thing on the page
setTimeout (function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

in this way we can easily load onload functions in the div. we combine the whole code and looks like that:

<?php
include_once 'config.php';
?>
<script>
var onload = [];
onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('ajax callback url');
}

</script>
<div id="msg" style="width:398px;height:298px;">test message content</div>
<div id="ajax" style="width: 398px; height: 298px;"> </div>

<script>
//the very last thing on the page
setTimeout(function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

reference :

http://forum.developers.facebook.com/viewtopic.php?id=5117

problem :
need to store users information by ajax call while on connect . but face problems using fbjs ajax calls using on connect .some times face the problem to send ajax request  in the forum also get related type of problems . like:

http://forum.developers.facebook.com/viewtopic.php?id=28153
http://forum.developers.facebook.com/search.php?search_id=92171720

let’s see a quick solution by a common example.

solution:

here we look at the after connect get user profile picture and name by connect.

we create a script connect.php and include the  config  file .connect.php

<?php
/*
* include config file
*/
?>

<div id="user"> </div>
<fb:login-button onlogin="update_user_box();"></fb:login-button>
<script type="text/javascript">FB.init("key", "xd_receiver.php"); </script><span style="display: block; padding-left: 6em;"><span>

now it’s look like that:

here in the connect button add onlogin function update_user_box().while click on connect then this function will call and update user by profile picture and name in the user id div.

in that update_user_box() function we will get the profile picture and name by calling ajax. So later on we can do anything by ajax.to call the ajax we will do it by jquery. Here I cannot do it by the fbjs  ajax method. For that reason I add jquery and other scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

now update update_user_box

<script type="text/javascript">
function update_user_box()

{

Var url = “http://www.t...com.display.php”; // ajax url which is here display.php

$.ajax({
type: "POST",
url:url,
data: "save=yes",
success: function(msg){
var user_box = document.getElementById("user");
user_box.innerHTML =msg;

}
});
}

now create the display.php Which call by ajax.

In the display php also include config file which include facebook client library

here is code

<?php
define(MAIN_PATH, realpath('.'));
include_once MAIN_PATH.'/init.php';
$fb_uid = facebook_client()->get_loggedin_user();
echo '<span> <fb:profile-pic uid='.$fb_uid.' facebook-logo=true></fb:profile-pic> Welcome, <fb:name uid='.$fb_uid.' useyou=false></fb:name>. You are signed in with your Facebook account.</span>';</span></span></span></span>

?>
<span style="display: block; padding-left: 6em;"><span>

this display.php returns the user profile picture and name. and it’s look like that.

that’s it

ok, i have learned my lesson while integrating <fb:multi-friend-selector [condensed] /> and <fb:multi-friend-input /> in an iFrame app where i was rying to render it uwing <fb:serverfbml>. i was designing a page where users of your application can select an item, then some of their friends and finally submit the form to the handler script (might be javascript routine too!)

as <fb:serverfbml /> renders the <fb:request-form /> inside another iframe (thats right – iframe inside an iframe) so its quite tough job to pass external data to any of the DOM element inside those iframe. later, i tried to dynamically render the <fb:serverfbml /> with the help of AJAX and XFBML.parseDOMTree() but no luck. the surprising fact that everything out there was renedring properly but not the request form (when returned via ajax). so finally i did it with FQL and by building a custom friend selector component. so here it is

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Friend Selector</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<fb:login-button></fb:login-button><br/><br/>
Hello <span id="me" uid="503274632" useyou='false'></span> And here is your friend list<br/>

<div id="friends"></div>
</body>
</html>
<script type="text/javascript"> 

function loadFriends(uid) {

    FB.XFBML.Host.autoParseDomTree = false;
    FB.XFBML.Host.addElement(new FB.XFBML.Name(document.getElementById("me")));

    FB_RequireFeatures(["CanvasUtil"], function(){  FB.CanvasClient.startTimerToSizeToContent(); });
    var api = FB.Facebook.apiClient;
    api.fql_query("SELECT uid, first_name, last_name FROM user WHERE  uid IN (SELECT uid2 FROM friend WHERE uid1 = "+uid+") order by first_name", function(result, ex) {

        data = "<table>";
        for (i=0;i<result.length;i++)
        {
            data += "<tr><td><input type='checkbox' value='"+result[i].uid+"' name='friends[]' id = 'friend"+result[i].uid+"' /></td><td>"+ result[i].first_name + " " + result[i].last_name+"</td></tr>";
        }
        data +="</table>";
        $('#friends').css({"overflow-y":"scroll","height":"200px","width":"300px","border":"1px solid #ccc"});
        $('#friends').html( data);

    });
}

FB.init("api_key", "xd_receiver.php",{"ifUserConnected":loadFriends});

</script>

and here is how it looks,

you will find it useful in your FBConnect applications