FB javascript SDK after jquery LOAD (ajax)

he script works fine for synchronous requests

HTML HERE


window.fbAsyncInit = function() {
    FB.init({appId: 'XXXXXXXX', status: true, cookie: true, xfbml: true});
        console.log('in');
    FB.getLoginStatus(function(response) {
    console.log(response);
        if (response.session) {
            // logged in and connected user, someone you know
            code here
            }
        } else {
            // no user session available, someone you dont know
            code here
        }    
    });

};

HTML HERE

I recently wanted to ajaxify the site, when I make an XMLHttpRequest to append it on the page (using JQuery's load shorthand for ajax GET req.) the javascript method FB.getLoginStatus does not get executed.

let me share the console results:

syn开发者_如何学Gochronous:  in , response (object)
asynchronous: in

can anyone help?

I'm having the same problem the way facebook made the library you can't use FB.init({}); again so we have to find a way to destroy it and create it again! There might be easier way using built in functions but this is a way that will definitely work. I already did this buy removing the entire FB object, I'll post back when I find the best solution!

UPDATE Ok here it is, found the built in function to parse for new elements ... SOLUTION:

FB.XFBML.parse(document.getElementById('idOfElementContainingFBML'));

//you want to use the least generation of parent elements containing the xfbml for best performance, in case of jQuery load it will be the element being used like this:

$('#result').load('ajax/test.html', function() {
   FB.XFBML.parse(document.getElementById('result'));
});