AddThis button will not work inside AJAX, but will work normally

Question

Basically, this is what I'm doing. User visits site, loads "index.html" Within index.html, it automatically loads, through AJAX, "details.html" into a DIV. I put an ADDTHIS button on "details.html". However, for some reason , the roll-over doesn't work.

When I visit details.html in the browser, the roll-over works. I'm guessing it's because of the AJAX?

<a class="addthis_button"  href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4adf7e45288f5b21">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0;margin-top:16px;"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4adf7e45288f5b21"></script>

score 14 · Answer 1 · answered Jan 24 '10 at 15:47

I recently ran in to issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.

It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script if the DOM is reloaded via AJAX. I have posted the full solution in detail on my blog here:

http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/

To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script by deleting the initial load and then reloading the script dynamically:

var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis){
    window.addthis = null;
}
$.getScript( script );

Just chiming in that for me this solution did not work. I had to do a callback in the `.getScript()` which ran `addthis.init()` for the button to show up. — Owen Allen, Oct 25 '11 at 17:48
This was basically it for me. However, the clearing of some additional variables was necessary, as described here: http://stackoverflow.com/questions/9650226/addthis-not-working-with-ajax?rq=1 — joaerl, Feb 03 '13 at 20:46

score 5 · Answer 2 · answered Apr 28 '13 at 13:35

5

addthis.toolbox(".addthis_toolbox");

answered Apr 28 '13 at 13:35

Mahmoud Khaled

6,226
6
37
42

score 2 · Accepted Answer · answered Oct 22 '09 at 07:20

if i understand your question correctly, in the callback of the ajax function, bind the roll-over to the add-this button.

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(){
     $('.addthis_button').hover(
       function(){
         //do mouse over
       },function(){
         //do mouse out
     });
   }
 });

you can also try

$('.addthis_button').live('mouseover',function(){//do mouseover});
$('.addthis_button').live('mouseout',function(){//do mouseout});

i've never used live, but it seems like it would work for you since your add_this button's get created after the $(document).ready()

score 2 · Answer 4 · answered Mar 15 '10 at 17:53

2

Ran in the same problem and this solved it for me in all major browsers (IE6+, FF, Safari in MAC/XP):

http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/comment-page-1/#comment-24

answered Mar 15 '10 at 17:53

Marco

31
1

score 1 · Answer 5 · answered May 28 '20 at 19:45

I had the same problem. Fixed it with the following code. I hope that fixes it for you too.

Original Method:

    var script = 'http://s7.addthis.com/js/300/addthis_widget.js?domready=1';
    if (window.addthis){
        window.addthis = null;
    }
    $.getScript( script );

New Method:

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

In AJAX REQUEST you can use like this:-

$.ajax({
    url:Url,
    type: 'POST',
    cache: false,
    success: function(res){
        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);
        // your custom code
    }
});

score 0 · Answer 6 · answered Oct 21 '09 at 21:45

It seems like the script is calling the onLoad event of javascript and using this ajax call won't actually trigger that event. You could try other "share this" widget?

Like http://sharethis.com/#STS=g12m3ugh.21zb or pre-load that button?

Can you post a little bit more of the story on what are you doing?

score 0 · Answer 7 · answered Oct 21 '09 at 23:58

Is details.html a fully compliant page on it's own? HTML, BODY, HEAD tags, etc?

If so, I think things can get kind screwy when you try to load it into another page. I would either change details.html to just include the barebones markup that you need - or - if you need it to still be individually accessible - you could use jQuery to strip out the needed bits after the ajax call and only inject that portion.

Details.html

<html>
<head>
</head>
<body>
    <div id="details">
    The needy bits.......
    </div>
</body>
</html>

Index.html

$("#targetDivID").load("detail.html #details");

score 0 · Answer 8 · answered Nov 17 '09 at 02:44

0

Add this snippet of .js to the .html you are loading. Replace "#atbutton" with your button's selector.

addthis.button("#atbutton");

answered Nov 17 '09 at 02:44

Shaun Santa Cruz

1

AddThis button will not work inside AJAX, but will work normally

8 Answers8

Linked