Facebook Cookbook

how to trigger multiple onload functions when divs are loaded by FBJS

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