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 in the callback of said .load() function, I've added this code to bring in the Addthis share functionality:

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 );

The code within the content of the permLink file called by the ajax request that loads the Addthis script is as follows:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
        addthis:url="<?php the_permalink(); ?>"
        addthis:title="<?php the_title(); ?>"
        addthis:description="<?php the_excerpt(); ?>"> 
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->

The problem is, addthis isn't loading as expected. It works right the first time an article is opened, but any other times (unless the page is refreshed) it fails to include the number that displays how many times the article was shared, which appears like this when I inspect the element: <a class="addthis_button_expanded" target="_blank" title="View more services" href="#">1</a>

EDIT:

Attempted a known fix: $.getScript( script , function() { addthis.init(); }); but this did not solve the problem.

EDIT August 14, 2012

The website is http://epicvan.com and I just removed the numbers because I never came up with a fix while I was working on it. The project was completed months ago so I won't be testing the new answers. Hope they can help you if you encounter the same problem! Cheers

Answer 1

Problem is that on a ajax call the #pubid is getting lost so AddThis doesn't know who is making the call.

This worked for me:

<script>
$.getScript("https://s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR-ID", function () {
    addthis_config = { pubid: 'YOUR-ID' };
    addthis.init();
});
</script>

Found the answer to this issue on the support site of addthis.com: http://support.addthis.com/customer/portal/questions/240144-email-template-when-using-ajax-bug-?t=89322

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