Addthis not working with Ajax

Question

I am loading all articles with Ajax but Addthis functionality is not correct

 $thisChild.load( permLink + \' #thePostStuff\', function() {

And

Answer 1

I had the same problem. Fixed it with the following. Hope that fixes it for you too.

Original:

    var script = 'http://s7.addthis.com/js/300/addthis_widget.js?domready=1#pubid=MY-PUB-ID';
if (window.addthis){
    window.addthis = null;
}
$.getScript( script );

New:

<script>
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
}
$.getScript(script);
</script>

Answer 2

After 1 hour of trying custom codes i found this one that works perfect.

$(document).ajaxStop(function() {
  if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
  }
  return $.getScript("http://s7.addthis.com/js/300/addthis_widget.js#pubid=sdive");
});

This is the source

Answer 3

Executing this line of code after an AJAX call works for me:

addthis.layers.refresh();

Below is my setup for AddThis

Script

<script type="text/javascript" 
        src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<my_pub_id>">
</script>

I put this code where I want AddThis to show

<div class="addthis_inline_share_toolbox_tvqk"></div>

How I do AJAX call

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {

        // Update the DOM

        if (typeof(addthis) != 'undefined' && addthis != null) 
            addthis.layers.refresh();
    }
};
xhttp.open("POST", "<address_to_post_back_to>", true);
xhttp.send(<post_data>);

Result

Answer 4

For those arrived at this question now as me, The code that worked for me was:

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=XXXXXXXXXXXXXXXXX"></script>
<script>
if (window.addthis) {
    // for others time force addthis to run again
    window.addthis.toolbox('.addthis_toolbox');
} else {
   // in the first time use autoload bu addthis
}
</script>

Answer 5

Please try the solution given at this link,

http://support.addthis.com/customer/portal/questions/399867-addthis-and-ajax-with-addthis-toolbox-

<script type="text/javascript">addthis.toolbox('.addthis_toolbox');</script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=vijayk"></script>

As i was also facing the same issue. But that get resolved by the above lines. Hope this will help.

Thanks, Vijay

Answer 6

I wrote a pretty detailed description here https://stackoverflow.com/a/16950881/1118070 but, the gist is that addthis.toolbox(".addthis_toolbox"); is the correct solution, but it's important to note that it should be called each time the new ajax content is loaded.

html

 <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_email" style="cursor:pointer"></a>
 </div>

javascript

// onload of the ajax content
addthis.toolbox('.addthis_toolbox'); 

Also note that anything that loads as an iframe such as the facebook like counter, it will cause problems if it is nested within a '.addthis_toolbox' container. I'd suggest putting it inside it's own container and calling the toolbox() method on them both.

See my link for more details.