How to use sharethis with Ajax

Question

I am ajaxing in new buttons after each successful http request.

//Remove events and items
$('#sthoverbuttons-chicklets span').remove();

I then add new items with new events in by passing an object into stwidget.

See here documentation for sharethis: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#Dynamic_Specification_through_JavaScript

//Finish with share buttons
wyrAjax.sharethis.finishAddingShareButton();

wyrAjax.sharethis = {
//Grab the current share height so we can keep it this height when we remove all the items
    shareThisHeight:null,
    init:function () {

        //If the height has not been set set it
        if(wyrAjax.sharethis.shareThisHeight===null){
            wyrAjax.sharethis.shareThisHeight = $('#sthoverbuttons').outerHeight();
        }

        //Set up elements so that we can use them as ID's
        $('.sthoverbuttons-chicklets').attr('id', 'sthoverbuttons-chicklets');
        if (!$('#shareLoading').length) {
            $('#sthoverbuttonsMain').append('<div id="shareLoading"><img src="/img/loading.gif" style="position: absolute; top: 50%;left: 37%"></div>');
        }
    },
    shareTypes:function(){
        var array = [];
        array[0]={
            "service":"facebook"
        };
        array[1]={
            "service":"twitter"
        };
        array[2]={
            "service":"delicious"
        };
        array[3]={
            "service":"googleplus"
        };
        array[4]={
            "service":"reddit"
        };
        array[5]={
            "service":"tumblr"
        };
        array[6]={
            "service":"stumbleupon"
        };
        array[7]={
            "service":"digg"
        };
        array[8]={
            "service":"sharethis"
        };
        return array;
    },
    startGettingShareButton:function () {
        //First we run a quick check to see if the elemnts have ID's
        wyrAjax.sharethis.init();

        //Now lets fade out and clean up all the shares so we can add new shares in.
        $('#sthoverbuttons-chicklets').hide();

        $('#sthoverbuttonsMain').height(wyrAjax.sharethis.shareThisHeight);
        wyrAjax.sharethis.addLoadingToShare();
    },
    addLoadingToShare:function () {
        $('#shareLoading').show();
        $('#sthoverbuttons-chicklets span').off().remove();
    },
    finishAddingShareButton:function () {
        $('#shareLoading').hide();
        var shareItems = wyrAjax.sharethis.shareTypes();
        $.each(shareItems,function(key, value){
            wyrAjax.sharethis.addShareThisButton(value);
        });
        $('.sthoverbuttons-chicklets').show();
    },
    addShareThisButton:function (object) {
        stWidget.addEntry({
            "service":object.service,
            "element":document.getElementById('sthoverbuttons-chicklets'),
            "url":"http://www.wouldyourathers.co.uk/question/" + wyrAjax.questionDetails.id,
            "title":"Would You Rather | " + wyrAjax.questionDetails.q1,
            "type":"large",
            "text":"Would You Rather " + wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2,
            "summary":wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2
        });
    }
};

When I click one of the newly added buttons it will go to for example the share feature of twitter, but it will also bring up for some reason Facebook's share.

I believe I want to remove all events on the spans before I re-add them.

Answer 1

So the problem i was having is that sharethis doesn't want you remove the share items. Sharethis stWidget.addEntry doesn't want to you to add new dom items, it wants you to replace the current share butons already on the page.

With this in mind i edited my code to add ID's to all buttons already shared:

 //Give all share buttons ID's
 var shareItems = wyrAjax.sharethis.shareTypes();
 $.each(shareItems,function(key, value){
   $('.st_'+value.service+'_large').attr('id','st_'+value.service+'_large');
 });

Then i used Sharethis's addEntry to just replace the existing button.

wyrAjax.sharethis = {
    //Grab the current share height so we can keep it this height when we remove all the items
    shareThisHeight:null,
    init:function () {

        //If the height has not been set set it
        if(wyrAjax.sharethis.shareThisHeight===null){
            wyrAjax.sharethis.shareThisHeight = $('#sthoverbuttons').outerHeight();
        }

        //Set up elements so that we can use them as ID's
        $('.sthoverbuttons-chicklets').attr('id', 'sthoverbuttons-chicklets');
        if (!$('#shareLoading').length) {

            //Give all share buttons ID's
            var shareItems = wyrAjax.sharethis.shareTypes();
            $.each(shareItems,function(key, value){
                $('.st_'+value.service+'_large').attr('id','st_'+value.service+'_large');
            });

            $('#sthoverbuttonsMain').append('<div id="shareLoading"><img src="/img/loading.gif" style="position: absolute; top: 50%;left: 37%"></div>');
        }
    },
    shareTypes:function(){
        var array = [];
        array[0]={
            "service":"facebook"
        };
        array[1]={
            "service":"twitter"
        };
        array[2]={
            "service":"delicious"
        };
        array[3]={
            "service":"googleplus"
        };
        array[4]={
            "service":"reddit"
        };
        array[5]={
            "service":"tumblr"
        };
        array[6]={
            "service":"stumbleupon"
        };
        array[7]={
            "service":"digg"
        };
        array[8]={
            "service":"sharethis"
        };
        return array;
    },
    startGettingShareButton:function () {
        //First we run a quick check to see if the elemnts have ID's
        wyrAjax.sharethis.init();

        //Now lets fade out and clean up all the shares so we can add new shares in.
        $('#sthoverbuttons-chicklets').hide();

        $('#sthoverbuttonsMain').height(wyrAjax.sharethis.shareThisHeight);
        wyrAjax.sharethis.addLoadingToShare();
    },
    addLoadingToShare:function () {
        $('#shareLoading').show();
    },
    finishAddingShareButton:function () {
        //Remove the loading.gif
        $('#shareLoading').hide();

        //grab array of different share types
        var shareItems = wyrAjax.sharethis.shareTypes();

        //Loop through 
        $.each(shareItems,function(key, value){
            wyrAjax.sharethis.addShareThisButton(value);
            $('#st_'+value.service+'_large > span:first-child').remove();
        });
        $('.sthoverbuttons-chicklets').show();
    },
    addShareThisButton:function (object) {
        stWidget.addEntry({
            "service":object.service,
            "element":document.getElementById('st_'+object.service+'_large'),
            "url":"http://www.wouldyourathers.co.uk/question/" + wyrAjax.questionDetails.id,
            "title":"Would You Rather | " + wyrAjax.questionDetails.q1,
            "type":"large",
            "text":"Would You Rather " + wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2,
            "summary":wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2
        });
    }
};

Hopefully somebody can find this helpful.