Problem with jQuery load() and Facebook XFBML
The situation
I open a layer (jQueryUI) like this.
$("#dialog").load('userinfo.html #layer').dialog('open');
userinfo.html displays the photo and the name of a facebook user.
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<...some code...>
<div id="layer">
<script type="text/javascript">
$(function() {
FB.init("2342342423424", "http://www.mysite.com/xd_receiver.htm");
});
</script>
<fb:profile-pic uid="200000999530485" size="square" linked="true"></fb:profile-pic> <fb:name uid="200000999530485"></fb:name>
</div>
<...some code...>
</html>
The problem:
The layer opens but the fbml tags are not rendered! Please help. I think load() doenst load the js-part.
(If i open the userinfo.html in the browser everything works finde)开发者_JAVA技巧
I think this should work:
$("#dialog").load('userinfo.html #layer', function() {
FB.XFBML.parse(document.getElementById('dialog'));
});
$("#dialog").dialog('open');
Notice that it's being called in the load callback in order to ensure the Ajax request has completed and the data has been loaded before the XFBML parsing has been triggered.
As for as I know, facebook needs this namespace:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Make sure that you are specifying that or try giving the id to it instead of the later div:
<html id="layer" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
FBML tags are not rendered if they are not present on the page from the beginning (i.e. you load fbml tags through ajax into some div). In order to render them you would need to do some extra work.
First of all, all js stuff should be moved to your main window (fb js include, fb init). userinfo.html should contain only fbml and html. Auto FBML parsing should be disabled in FB.init({xfbml : false}) (I don't remember, it might work with auto parsing on but I think I had to turn it off).
You need to mark a place where your future fbml will be loaded dynamically with fb:serverFbml tag:
<div id="dialog">
<fb:serverFbml id="dialog-fbml"></fb:serverFbml>
</div>
Your fbml loading script now would look like:
$("#dialog-fbml").load('userinfo.html #layer'); //load fbml
FB.XFBML.parse($("#dialog")[0]); //parse it
$("#dialog").dialog('open'); //show
If i parse the XFBML with some delay, everything works fine. Isnt there a callback method for dialog('open'), is there?
$("#dialog").load('userinfo.html #layer');
$("#dialog").dialog('open');
setTimeout(function() {FB.XFBML.parse(document.getElementById('#dialog'));} ,4000);
加载中,请稍侯......
精彩评论