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

i had same problem and [i resolve in this post](http://stackoverflow.com/a/40352925/7097461), so try to see — Michel Dos Santos Kuguio, Nov 01 '16 at 01:30

score 36 · Accepted Answer · answered Aug 14 '12 at 23:45

36

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>

answered Aug 14 '12 at 23:45

Tracy

484
4
6

Finally the search is over :) – joaerl Feb 03 '13 at 20:42
1

Nice work. Works like a charm. FWIW, http://stackoverflow.com/a/2127595/186782 says a getScript() callback, calling addthis.init() is also required, which was NOT the case for me. – zmonteca Mar 13 '13 at 21:35
1

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. – Cristiano Oct 14 '13 at 05:52
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? – Xtremefaith Mar 13 '14 at 23:44

score 5 · Answer 2 · edited May 23 '17 at 10:29

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.

score 4 · Answer 3 · answered Sep 27 '14 at 17:37

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

score 2 · Answer 4 · answered Mar 14 '13 at 15:48

2

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

answered Mar 14 '13 at 15:48

Vijay Kumbhar

896
1
13
31

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 – Xtremefaith Mar 13 '14 at 23:47

score 1 · Answer 5 · edited Apr 28 '13 at 14:13

1

addthis.toolbox(".addthis_toolbox");

edited Apr 28 '13 at 14:13

xdazz

158,678
38
247
274

answered Apr 28 '13 at 13:38

Mahmoud Khaled

6,226
6
37
42

score 1 · Answer 6 · edited Nov 10 '15 at 14:17

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

score 0 · Answer 7 · answered Aug 14 '12 at 21:41

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

score 0 · Answer 8 · answered Apr 08 '13 at 15:16

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>

score 0 · Answer 9 · answered Aug 24 '17 at 04:01

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

Addthis not working with Ajax

9 Answers9

Linked