Не удается включить мульти-выбор друзей на Facebook в Facebox

Question

Я пытаюсь разместить Facebook multi-friend-selector в Facebox (не хочу использовать fb: диалог, так как он открывает новое окно) Проблема, которая у меня возникла, вероятно, связана с выходом из кавычек в javascript, но я бился головой о стену, пытаясь понять это.

Есть ли лучший способ сделать это?

$('#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>"
);
});

Примечание: Я заменил весь материал example.com для целей этого поста. Код выбора нескольких друзей отлично работает, когда вынимается из строки Facebox.

Заранее спасибо за любую помощь.

Answer 1

<fb:serverfbml> тег должен присутствовать на странице с самого начала, вы не можете добавить его динамически. Все внутри может быть динамичным.

Так что присвойте <fb:serverfbml> некоторый идентификатор, а затем загрузите ваш fbml в него, когда это необходимо.

На странице:

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

Сценарий:

$('#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>"
    );

});

ОБНОВЛЕНИЕ 2

Попробуйте отключить автоматический синтаксический анализ fbml в init fb:

FB.init({xfbml: false});

, а затем вручную анализировать fbml после загрузки:

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

Если это не сработает, попробуйте удалить обертку <script type='text/fbml'></script> из вашего fbml (у меня ее нет в моем коде, без нее работает нормально).

Answer 2

Для тех, у кого может быть такая же проблема, это комбо, которое сработало в конце.Спасибо @serg за то, что он помог мне найти путь к различным альтернативам.

<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

Я знаю, что мой ответ приходит довольно поздно, но вы можете попробовать загрузить его как внешний HTML в скрытом фрейме. Затем просто покажите этот iframe внутри фейсбокса так:

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

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

В фрагменте много встроенных атрибутов, но он предназначен только для отображения его свойств.

Надеюсь, это поможет.