how do i call a js function within window.fbAsyncInit

I am working on a facebook app. I have the following code which works fine if I run it like this

  <di开发者_如何学Cv id="fb-root"></div>
       <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, 
          status  : true, 
          cookie  : true, 
          xfbml   : true 

        );



          $('#stgame').click(sendRequest);
    function sendRequest() {
    document.getElementById('gameSetup').style.display = 'block';
        FB.ui({
            method: 'apprequests',
            message: '<?=$me[name];?> has invited you to a fun game of Towers. To play, just click on accept. Towers is a "3D" tile stacking word game.',
        },
        function (response) {
            if (response && response.request_ids) {
                var requests = response.request_ids.join(',');
                $.post('handle_requests.php',{uid: <?php echo $uid; ?>, request_ids: requests},function(resp) {

                window.location.replace("play.php?" + resp);
                });
            } else {
               document.getElementById('gameSetup').style.display = 'none';
            }
        });
        return false;
    }


       };

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

however, I need to alter it so that I can send a variable to "sendRequest" and change the trigger to an inline "onClick"

To do this I have created a link on the page like this:

<a><img src=/images/start.png onClick=sendRequest('1234556');></a>

and change the sendRequest function to sendRequest(variable) so that it can take the variable

However when I do this, each time I click on the button that has the onClick trigger, it gives me an error "cant find variable sendRequest"

I think this is because the onClick cant see the sendRequest function.

So my question is, how do I call that function from the onClick. bearing in mind that there will be multiple buttons on the page that will need to call the function giving the function a different variable value on each of them.

My current code looks like this:

<a><img src=/images/start.png onClick=sendRequest('123');></a>
<a><img src=/images/start.png onClick=sendRequest('456');></a>

<div id="fb-root"></div>
    <script>


      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, 
          status  : true,
          cookie  : true, 
          xfbml   : true 
        }

        );


    function sendRequest(opponent) {
    document.getElementById('gameSetup').style.display = 'block';
        FB.ui({
            method: 'apprequests',
            to:opponent,
            message: '<?=$me[name];?> has invited you to a fun game" tile stacking word game.',
        },
        function (response) {
            if (response && response.request_ids) {
                var requests = response.request_ids.join(',');
                $.post('handle_requests.php',{uid: <?php echo $uid; ?>, request_ids: requests},function(resp) {

                window.location.replace("play.php?" + resp);
                });
            } else {
               document.getElementById('gameSetup').style.display = 'none';
            }
        });
        return false;
    }



             };



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

If anyone could tell me how I can call this function I would appreciate it. as far as I am aware, the function needs to stay inside the window,fbAsyncInit function in order to actually work.

Any help would be greatly appreciated.

First of all, I haven't looked to all your code but I really think that you should do more effort on it (formatting and logic).

Anyway, to the point:
You can have a flag that will only set to true when the JS-SDK is loaded, and you can "block" any process outside the window.fbAsyncInit till the flag is set. Something like:

<div id="fb-root"></div>
<script>
var isLoaded = false;
window.fbAsyncInit = function() {
    isLoaded = true;
...
...
}
function myFunc(myVar) {
    if(isLoaded) {
        // Do FB related stuff
    }
}

I think the problem is that the sendRequest method is inside the function scope, so not available in the global namespace (where the dom could get to it). You might try changing:

function sendRequest()...

to

window.sendRequest = function()...

I should also mention that there is almost never a good reason to attach events directly to the dom like that. Even where you are rendering that JavaScript variable data in a templating language like php it is far better to set the variable values in an associative way that does not couple the event to the dom (but could couple the data to the element).