Request.HTML

Sends HTML code to backend updates target div and executes <script>

HTML

<p id='loadmore'>Click here to load more Facebook like buttons. Each time it will add a box to the page, then run FB.XFBML.parse() to create the like button.<br><br>More detail in console log.</p>
<div id='fb-root'></div>
<div id='holder'>
    <div class='box'>
        <div class="fb-like" data-href="http://test.com/a" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    </div>
</div>

CSS

.box {
    width:100px;
    height:30px;
    border:solid 2px green;
    padding:10px;
    margin:20px;
}
#loadmore {
    cursor:pointer;
    font-weight:bold;
    padding:10px;
}

JavaScript

$(function () {
    $('#loadmore').click(function () {
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<div class="box" style="clear:both;float:left;"><div class="fb-like" data-href="http://test.com/a'+Math.floor((Math.random()*10000)+1)+'" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div></div><div class="box" style="float:left;"><div class="fb-like" data-href="http://test.com/a'+Math.floor((Math.random()*10000)+1)+'" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div></div>',
            },
            success: function (html) {
                // wrap HTML in special div so we can find it later
                newDivName = "d" + String(new Date().valueOf());
                var $newhtml = $("<div id='" + newDivName + "'>" + html + "</div>");
                $('#holder').append($newhtml);
                FB.XFBML.parse($newhtml[0]);

                // walk through new HTML, get all FBXML bits and parse them
               // console.log('finding and XFBML parsing anything that matches $("#' + newDivName + ' .fb-like")');
               // $('#' + newDivName + ' .fb-like').each(function () {
               //     console.log('found something with class = .'+$(this).attr('class'));
              //      FB.XFBML.parse(this);
               // });
            }
        });
    });

});




// all code below is directly from Facebook developer docs

window.fbAsyncInit = function () {
    FB.init({
        appId: '173603499485572', // App ID
        channelUrl: '//themepark.com/channel.html', // Channel File
        status: true, // check login status at init - see https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
    });
};

// Load Facebook SDK asynchronously
(function...