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>

Adelaadelaida

Answer 1

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

Cila

Answer 2

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

Ethaethan

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. – Megasporangium

This was basically it for me. However, the clearing of some additional variables was necessary, as described here: #9650726 – Clip

Answer 3

addthis.toolbox(".addthis_toolbox");

Nassi

Answer 4

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

Silvey

Answer 5

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
    }
});

Parishioner

Answer 6

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?

Pandarus

Answer 7

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");

Casie

Answer 8

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

addthis.button("#atbutton");

Lippold