CODEWITHSUNDEEP
javascriptjqueryajaxaddthis
TIMEX
TIMEX

Reputation: 271974

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

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>

Upvotes: 8

Views: 10811

Answers (8)

Vishal Thakur
Vishal Thakur

Reputation: 1696

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

Upvotes: 1

Mahmoud Khaled
Mahmoud Khaled

Reputation: 6276

addthis.toolbox(".addthis_toolbox");

Upvotes: 5

Marco
Marco

Reputation: 31

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

Upvotes: 2

user257850
user257850

Reputation:

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

Upvotes: 14

Shaun Santa Cruz
Shaun Santa Cruz

Reputation: 1

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

addthis.button("#atbutton");

Upvotes: 0

Brandon Henry
Brandon Henry

Reputation: 3720

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

Upvotes: 2

WesleyJohnson
WesleyJohnson

Reputation: 1538

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

Upvotes: 0

DFectuoso
DFectuoso

Reputation: 4897

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?

Upvotes: 0

Related Questions