Why does not this code work on firefox? (it works on Opera perfectly)

Question

i finished my app but when i test it on the other internet browsers, there was a problem

i will add my code. i couldnt see the error.as i said it works on opera but not in firefox :/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
 <div id="fb-root"></div>
     <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});

            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/tr_TR/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);

            }
            ());

        function lget(idd){
              FB.api('/'+idd, function(response) {
                document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
                });
             } 




       </script>       


<div style="padding-left:6px;"><center>

<div id="525864081_a" ></div>

<script type="text/javascript">
lget(525864081);
</script>



<div id="534018674_a" ></div>

<script type="text/javascript">
lget(534018674);
</script>


</div>
</body>
</html>

possible duplicate of [Is there a way to detect if the Facebook Javascript SDK loaded successfully?](http://facebook.stackoverflow.com/questions/5334977/is-there-a-way-to-detect-if-the-facebook-javascript-sdk-loaded-successfully) — ifaour, Aug 25 '11 at 11:48

score 0 · Accepted Answer · edited Aug 25 '11 at 14:17

You are loading the Facebook JS SDK in async mode and thus the FB object is not ready when you call it inside lget, the async loading occurs after your calls to lget and even after the onload event in Firefox.

Try not loading the code asynchronously and note that it is working fine

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
                FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});

  function lget(idd){
              FB.api('/'+idd, function(response) {
                document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
                });
             } 

     </script>

<div style="padding-left:6px;"><center>

<div id="525864081_a" ></div>

<script type="text/javascript">
lget(525864081);
</script>



<div id="534018674_a" ></div>

<script type="text/javascript">
lget(534018674);
</script>

</div>
</body>
</html>

if you want to see the execution order try something like this

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body onload="console.log('onload event'); false;">
 <div id="fb-root"></div>
     <script type="text/javascript">
            window.fbAsyncInit = function() {
        FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
        console.log('FB object ready');
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/tr_TR/all.js';
                e.async = true;
        document.getElementById('fb-root').appendChild(e);
            console.log('This executed first');
            }
            ());

        function lget(idd){
            console.log('lget - ' + idd);
             };
       </script>


<div style="padding-left:6px;"><center>

<div id="525864081_a" ></div>

<script type="text/javascript">
lget(525864081);
</script>



<div id="534018674_a" ></div>

<script type="text/javascript">
lget(534018674);
</script>


</div>
</body>
</html>

this is the output you'll get in Firefox

This executed first
lget - 525864081
lget - 534018674
onload event
FB object ready

Why does not this code work on firefox? (it works on Opera perfectly)

1 Answers1