CODEWITHSUNDEEP
jqueryajaxfacebook
sherly
sherly

Reputation: 305

Facebook share button not showing in a page rendered by ajax

My ajax:

$("#searchform").on("submit", function () {
    //$(this).find(':submit').attr('disabled','disabled');
    var data = {
        "action": "test"
    };

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "search/ajax2.php",
        data: data,

        success: function (data) {

            getData=data;



if(data!=""){
                 $("inner_div").append("Posted On:"+ data[i].postDate +"<div class='fb-share-button' data-href='https://gloopal.com/search2.php?TID="+ tid +"' data-layout='button'></div>")  ; 

            ......................
           ..........................

            }else
{
.........
.......
}

php page:

after opening tag:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

In other pages I'm including the fb api after body tag and and below in div and it works: bu not in he ajax rendered page: what should I do for it to render?

<div class="fb-share-button" data-href="https://gloopal.com/search2.php?TID=<?php echo $tid; ?>" data-layout="button">
</div>

Upvotes: 1

Views: 641

Answers (1)

WizKid
WizKid

Reputation: 4908

As explained at https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse you need to call FB.XFBML.parse(). That is automatically done when the sdk is included. But if the share button is not in the HTML code at that point it can't be parsed. So just call FB.XFBML.parse() after you update the HTML.

Upvotes: 2

Related Questions