ansaurus

Question

Problem with jQuery load() and Facebook XFBML

Answer 1

A:

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"&gt;

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"&gt;

Sarfraz 2010-07-11 18:24:58

Answer 2

+1 A:

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

serg 2010-07-11 19:18:28

Thanks, but this opens userinfo.html in the current tab:FB.XFBML.parse($("#dialog"));

fabian 2010-07-11 19:28:41

@fabian: as I understand `#dialog` is just a div on your page which you want to turn into popup with dynamically loaded fbml? Just make it hidden until it is displayed.

serg 2010-07-11 19:40:06

@fabia: see daaku'a answer, need to put parsing into load's callback.

serg 2010-07-12 06:13:22

Answer 3

A:

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

fabian 2010-07-11 20:03:59

Answer 4

+3 A:

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.

daaku 2010-07-11 23:55:18

Good point, should parse fbml on load callback. That's what I got wrong.

serg 2010-07-12 06:11:27

@serg555 - yep, exactly. Added a note to highlight that fact.

daaku 2010-07-12 17:15:40

ansaurus

tags:

views:

answers:

Problem with jQuery load() and Facebook XFBML

related questions