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

Kibosh

i had same problem and i resolve in this post, so try to see – Vexillum

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>

Yeld

Finally the search is over :) – Civvies

Nice work. Works like a charm. FWIW, https://mcmap.net/q/902961/-addthis-button-will-not-work-inside-ajax-but-will-work-normally says a getScript() callback, calling addthis.init() is also required, which was NOT the case for me. – Sternwheeler

Not working for me. When I put this, AddThis doesn't work at all. Before it loaded once and then disappeared but now it doesn't show at all. – Suspire

This works but then I get a pop-up ad now with no close button asking me about the chrome extension. What are the _adr, _atc, _etc settings anyways? Is it possible one of them is resetting something that now allows this ad pop-up? – Singer

Answer 2

I wrote a pretty detailed description here https://mcmap.net/q/902962/-addthis-in-ajax 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.

Segno

Answer 3

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

Mirnamirror

Answer 4

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

Glower

Console says that addthis is undefined, there is no method .toolbox for 'undefined'. I find this strange since this a popular answer throughout the forums but I've not gotten any positive results from it – Singer

Answer 5

addthis.toolbox(".addthis_toolbox");

Doomsday

Answer 6

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

Sherrie

Answer 7

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

Sanson

Answer 8

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>

Tindle

Answer 9

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

Headwards