Can't get Facebook multi-friend-selector working in Facebox

I'm trying to place the Facebook multi-friend-selector in a Facebox (don't want to use fb:dialog as it pops a new window). The problem I'm having probably stems from escaping quotation marks in javascript, but I've been banging my head against the wall trying to figure it out.

Is there a better way to do this?

$('#test_button').click(function(){
$.facebox(
    "<div id='box'>" +  
        "<fb:serverfbml width='615'>" +
          "<script type='text/fbml'>" +
            "<fb:request-form action='http://example.com/'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example.com/""     label=""Example Label"" />"">" +
            "<fb:multi-friend-selector showborder='false'" +
                "bypass='cancel'" +
                "cols=4" +
                    "actiontext='Invite Friends To Example'/>" +
            "</fb:request-form>" +
          "</script>" +
        "</fb:s开发者_JAVA百科erverfbml>" +            
    "</div>"
);
});

Note: I substituted all of the example.com stuff for the purposes of this post. The multi-friend-selector code works fine when taken out of the Facebox string.

Thanks in advance for any help.

<fb:serverfbml> tag must be present on a page from the beginning, you can't add it dynamically. Everything inside it can be dynamic though.

So assign <fb:serverfbml> some id and then load your fbml inside it when needed.

On the page:

<div id='box'>
    <fb:serverfbml width='615' id='invite_box'></fb:serverfbml>
</div>

Script:

$('#test_button').click(function(){
    $("#invite_box").html(
          "<script type='text/fbml'>" +
            "<fb:request-form action='http://example.com/'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example.com/""     label=""Example Label"" />"">" +
            "<fb:multi-friend-selector showborder='false'" +
                "bypass='cancel'" +
                "cols=4" +
                    "actiontext='Invite Friends To Example'/>" +
            "</fb:request-form>" +
          "</script>"
    );

});

UPDATE 2

Try to disable auto fbml parsing in fb init:

FB.init({xfbml: false});

and then manually parse fbml after load:

$('#test_button').click(function(){
    $("#invite_box").html(...);
    FB.XFBML.parse($("#box")[0]);
});

If that doesn't work try to remove <script type='text/fbml'></script> wrapper from your fbml (I don't have it in my code, works fine without it).

For anyone how may be having the same issue, this is the combo that worked in the end. Thanks to @serg for helping me find my way through some different alternatives.

<div id='invite_button'><button type='button' id='test_button'>Add Friends</button></div>

<div id='outside_invite_box' style='display:none;'>     
    {% include 'poigsocial/fb_invite_friends.html' %}
</div>

<!-- Contents of fb_invite_friends.html -->
<div id='inside_invite_box'>    
<fb:serverfbml width="615">
    <script type="text/fbml">
        <fb:request-form action="http://example.com/"
            method="POST"
            invite="true"
            type="Example"
            content="Blah Blah Blah <fb:req-choice url='http://example.com/' label='Join' />">
            <fb:multi-friend-selector showborder="false"
                bypass="cancel"
                cols=4
                rows=4
                actiontext="Invite Facebook Friends"/>
        </fb:request-form>
    </script>
</fb:serverfbml>            
</div>  

<script type="text/javascript">
$(document).ready(function(){

    $('#test_button').click(function(){
        $.facebox({ div: '#inside_invite_box' }, 'invite_lightbox');        
    }); 
});
</script>

I know that my answer comes pretty late, but you can try loading it as an external html in a hidden iframe. Then just show this iframe within the facebox like this:

<iframe src="multiselector.html" id="invite" style="display:none;width:624px; height:485px; border:0;"></iframe>

<a href="#invite" rel="facebox">invite friends</a>

There's a lot of inline attributes in the snippet but that's only intended for showing its properties.

Hope it helps.