Addthis not working with Ajax

问题:

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

回答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>

回答2:

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.

回答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

回答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

回答5:

addthis.toolbox(".addthis_toolbox");

回答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

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

回答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>

回答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