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

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 2

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 3

I read this support post the other day, it might have to do with your problem: http://support.addthis.com/customer/portal/questions/240144-email-template-when-using-ajax-bug-?t=89322

If I understand it correctly he describes that after the first share, the widget gets disconnected from your profile and every future share (without refresh) does not get tracked or anything. his solution was declaring the pubid separately. I have no idea if this helps at all, but I thought it wouldn't hurt to show you what I found on the subject :)

Answer 4

addthis.toolbox(".addthis_toolbox");

Answer 5

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.

Answer 6

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>