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

admin管理员组

文章数量:1330955

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='/'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""/""     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 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.

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./'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example./""     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. 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.

• javascript
• jquery
• string
• facebook

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 13, 2010 at 1:17 JoeJoe 26.8k1212 gold badges4040 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

<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./'" +
                "method='POST'" +
                "invite='true'" +
                "type='Example'" + 
                "content=""Echo Content. <fb:req-choice url=""http://example./""     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 bo 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./"
            method="POST"
            invite="true"
            type="Example"
            content="Blah Blah Blah <fb:req-choice url='http://example./' 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 es 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.

本文标签： javascriptCan39t get Facebook multifriendselector working in FaceboxStack Overflow