How to put XFBML code by ajax?

Question

I would like to use javascript (JQuery) to ask the server for XFBML code via ajax. The XFBML code will then attached to the DOM.

Here it is the php code:

echo "
<fb:serverFbml>
    <script type=text/fbml'>
    <fb:fbml>
        <fb:request-form
            action='http://myserver.com/invited.php'
            method='post'
            type='myserver'
            invite='true' 
            content='yo you...'>
            <fb:request-form-submit uid=12312312label='Send to %n ' import_external_friends=false />
        </fb:request-form>
        </fb:fbml>
  </script>
</fb:serverFbml>

"; 

and here is the javascript:

function clickME() {

    $.ajax(
            {
                url:'http://myserver.com/fbml_ajax.php',
                success:attachData,

                type:'GET',
                dataType:'html',
                global:false
            }
        );

}

function attachData(data) {
    var myData = data;
    $('#attachnow').html(data);
}

I can't make it work.. it is not attached.
If I just put the XFBML staticly on the HTML page, it works. but if I attach to DOM it doesn't.

Is it because of the tag? or is it because of the data that contains \r\n when return from from server?

Answer 1

You need to use FB.XFBML.parse on any new content. FBML is only parsed on page load by default. According to the second example in the page I linked, the exact code would be

FB.XFBML.parse(document.getElementById('attachnow'));

added as the last line of your attachData function.