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.
view plaincopy to clipboardprint?

   1. var onload = []; 
   2.  
   3. onload.push(function() { 
   4. //ONLOAD STUFFS HERE 
   5. msg_laod(); 
   6. do_ajax(); 
   7.  
   8. }); 
   9.  
  10. </script> 

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.

view plaincopy to clipboardprint?

   1. <script> 
   2. function msg_laod() 
   3. { 
   4. document.getElementById( amsg).setInnerHTML( est message content); 
   5.  
   6. } 
   7.  
   8. function do_ajax() 
   9. { 
  10. var ajax = new Ajax(); 
  11. ajax.ondone = function(data) { 
  12. document.getElementById( areq).setInnerFBML(data); 
  13. } 
  14. ajax.requireLogin = 1; 
  15. ajax.responseType = Ajax.FBML; 
  16. ajax.post(http://www.techsmashing.com/banglakeyboard/adduser.php); 
  17. }            ajax.post(.....display.php); // ajax callback url 
  18. }</script> 

<script>
function msg_laod()
{
document.getElementById( amsg).setInnerHTML( est message content);

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById( areq).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.

view plaincopy to clipboardprint?

   1. </p></p> 
   2.  
   3. <script> 
   4. //the very last thing on the page 
   5. setTimeout (function() { 
   6. for(var a = 0;a < onload.length;a++) {onload[a]();} 
   7. }, 100); 
   8. </script> 

</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:
view plaincopy to clipboardprint?

   1. <?php 
   2. include_once config.php; 
   3. ?> 
   4. <script> 
   5. var onload = []; 
   6. onload.push(function() { 
   7. //ONLOAD STUFFS HERE 
   8. msg_laod(); 
   9. do_ajax(); 
  10.  
  11. }); 
  12.  
  13. function msg_laod() 
  14. { 
  15. document.getElementById( amsg).setInnerHTML( est message content); 
  16.  
  17. } 
  18.  
  19. function do_ajax() 
  20. { 
  21. var ajax = new Ajax(); 
  22. ajax.ondone = function(data) { 
  23. document.getElementById( areq).setInnerFBML(data); 
  24. } 
  25. ajax.requireLogin = 1; 
  26. ajax.responseType = Ajax.FBML; 
  27. ajax.post(ajax callback url); 
  28. } 
  29.  
  30. </script> 
  31. <div id="msg" style="width:398px;height:298px;">test message content</div> 
  32. <div id="ajax" style="width: 398px; height: 298px;"> </div> 
  33.  
  34. <script> 
  35. //the very last thing on the page 
  36. setTimeout(function() { 
  37. for(var a = 0;a < onload.length;a++) {onload[a]();} 
  38. }, 100); 
  39. </script>

 Original Source:
http://fbcookbook.ofhas.in/2009/02/15/how-to-trigger-multiple-onload-functions-when-divs-are-loaded-by-fbjs/