Render 'like' button after ajax call

Question

there were a few question similar to mine on the stack but none that answered my question, so...

An ajax call returns the standard html code for creating the like button:

<div class="fb-like" data-href="http://www.website.com" data-send="true" data-width="450" data-show-faces="true"></div>

This html does show up in the source when looked at with 'inspect element', but it is not rendered, i.e. the space where the button should be is blank. Is there some rendering function that I should be using?

Any hints would be greatly appreciated!

EDIT: Here's the ajax request and parseing - the 'like' button is put in '#thequestion' along with some other text (it is echoed from question.php).

$("#thequestion").load("/thought/question.php", { ans: choice, id: questionId } );
    $("#graph").load("/thought/graph.php", { id: questionId } );
    $("#fbCommentsPlaceholder").html("<div class='fb-comments' data-href='http://qanai.com/thought/#" + questionId + "' data-num-posts='2' data-width='470'></div>");
    FB.XFBML.parse();
    eval(document.getElementById('thequestion').innerHTML);
    eval(document.getElementById('graph').innerHTML);

(I know eval is evil)

EDIT 2: The like button appears if FB.XFBML.parse(); is executed manually (in the console) after the ajax call. Thanks

Answer 1

You have to call FB.XFBML.parse(); after the ajax call.

Documentation: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Edit: now I see that you're trying to load content into $('#thequestion'). .load takes a callback that runs after the request completes. You should do something like:

$('#thequestion').load('/my/url', { my: 'params' }, function() {
    FB.XFBML.parse();
});

Documentation: http://api.jquery.com/load/