Share This buttons in Bootstrap Popover not clickable

Question

I have a link which opens a popover, and in the popover I load content from a div. The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.

So the set up looks like this :

Button and content :

<a href="#share" class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</a>

<div id="share_this_btns" class="hidden">
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
    <div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
    <div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
    <span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>

Popover init

$('#shareHead').popover({
    title   : "Share",
    html    : true,
    content : function(){
        return $('#share_this_btns').html();
    },
    placement : 'bottom'
});

The buttons turn up just fine and also show the count - however, they can't be clicked.

I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID).

Can you please advise?

EDIT// It seems to work every now and then without me changing anything. So the scripts seem to run, maybe it is an issue with how the elements are layered?

Answer 1

Ok I figured it out. I cannot just load sharethis data into the popover, so what I did is this : I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();

For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init. After that, however, the popover isn't positioned correctly because the width changes after the load. So I also wrote a function that resizes everything. It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.

The two sharethis scripts are already loaded in the header.

The final body code looks like this :

Button that opens popover

<div id="btnParent_head">
    <button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
    <a href="#pledge" class="btn btn-main scroll"><i class="fa fa-thumbs-o-up"></i> Pledge</a>
    <button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>

Javascript/JQuery

$(document).load(function(){
    $('#shareHead').popover({
            title   : "Share",
        html    : true,
        content : function(){
            var text = '';
            text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
                text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
            text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
             return text;
            },
            placement : 'bottom',
        callback : function(){
                 reloadStBtns(resizePopover,$('#btnParent_head     .popover'),$('#shareHead'));
        }
    });
});

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
      tmp.call(this);
      if (this.options.callback) {
        this.options.callback();
      }
}

function reloadStBtns(callback,popover,parent) {
    stButtons.locateElements();
    setTimeout(function(){
        callback(popover,parent);
    },500);
}
function resizePopover(popover, parent) {
    var i_width = parent.outerWidth();
    var i_swidth = popover.outerWidth();
    var i_nleft = (i_width - i_swidth)/2
    popover.css({'left':i_nleft});
}

I wish there was a better solution than doing the setTimeout, but I couldn't find anything.

Answer 2

It doesn't look like you have linked the share buttons up to anything. Try wrapping each span pointing to a resource in an anchor tag e.g.:

<a href="https://www.facebook.com/YourPage"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></a>

Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster.