Ajax – Facebook comment box rendered after AJAX call

ajaxfacebookfbml

I'm trying to display a facebook comment box along with generated ajax content. I cut down all my code to a simple example where I am eveidently missing something.

My main example page http://www.gerdalouw.com/ajax/ajax.html (from the dropdown select Test Ajax to execute)

The drop down then automatically draws in http://www.gerdalouw.com/ajax/ax.html << this works fine on its own, but the FB comment box doesn't want to generate via the Ajax call.

I've tried using the FB.XFBML.parse(); function, but I am either putting it at the wrong place or I am missing something else? I guess I am missing something very obvious somewhere?

I've been going through many possible solutions to my problem on here, but just couldn't find something that worked. Anyone that can help please?

Best Answer

This shall work for you:

$('body').ajaxComplete(function(){ FB.XFBML.parse(document.body) });

It will call FB.XFBML.parse for every ajax call. So you don't need to repeat the call everywhere.

Related Solutions

Javascript – How to manage a redirect request after a jQuery Ajax call

I read this question and implemented the approach that has been stated regarding setting the response HTTP status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to AJAX requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The JavaScript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an AJAX request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jQuery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        } else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

Facebook – What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for

This technique is now deprecated.

This used to tell Google how to index the page.

https://developers.google.com/webmasters/ajax-crawling/

This technique has mostly been supplanted by the ability to use the JavaScript History API that was introduced alongside HTML5. For a URL like www.example.com/ajax.html#!key=value, Google will check the URL www.example.com/ajax.html?_escaped_fragment_=key=value to fetch a non-AJAX version of the contents.

Best Answer

Related Solutions

Javascript – How to manage a redirect request after a jQuery Ajax call

Facebook – What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for

Related Topic