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

Question

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:serverfbml>" +            
    "</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.

Answer 1

<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).

Answer 2

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>

Answer 3

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.