AddThis not working after ajax load

Question

I have the AddThis js for bookmarking the details to the calender.This is working correctly on page load,but I do some filtering using ajax load and replace the html, after this the AddThis button not showing.here is my code for ajax .

$('document').ready(function () {

    $('.eventSelect').change(function () {
       var selectedDate = $('#eventDate').val();
        var keyword = $('#eventsearch').val();
        var url = "/EventsHome?eventDate=" + selectedDate + "&keyword=" + keyword;
       $.ajax({
           type: "GET"
          , url: url
          , success: function (data) {
              console.log($(data).find(".eventList").html());
              $(".eventList").html($(data).find(".eventList").html());
             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);

             }
          , error: function (XMLHttpRequest, textStatus, errorThrown) {

          }, comeplete:

`window.addthis = null;`, do you mean to remove Dom? And `$.getScript(script);`, do you get back the button in script? — Flying Fisher, Feb 12 '14 at 04:52
@Karthick Kumar Ganesh: you shouldn't be editing source-code in a question, as it might be the bug the asker is missing. I'll revert that for you. — GitaarLAB, Feb 12 '14 at 04:55

score 8 · Answer 1 · answered Jan 25 '17 at 21:52

8

Use this script when you load new content:

if(typeof addthis !== 'undefined') { addthis.layers.refresh(); }

It is only solution for addthis_inline_share_toolbox!

addthis.toolbox() works only when you have specified buttons inside addthis element (mostly older versions).

answered Jan 25 '17 at 21:52

Jan Šafránek

893
10
13

3

this should be the approved comment. – Jeff Shain Dec 14 '18 at 17:58

score 4 · Answer 2 · answered Feb 12 '14 at 20:18

You shouldn't need to reset the AddThis variables and reload the script, if you simply call:

addthis.toolbox();

this should re-render the buttons according to whatever configuration you have specified. Take a look at the documentation here:

http://support.addthis.com/customer/portal/articles/1293805-using-addthis-asynchronously#.UvvWw0JdWTM

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 4 · Answer 4 · edited May 23 '17 at 10:30

4

Would have added this as a comment to Sol's answer, but I lack the rep. The actual syntax for reloading the toolbox is to pass in the class selector for the toolbox, however this assumes that you have already init'ed addthis

 addthis.toolbox('.addthis_toolbox')

edited May 23 '17 at 10:30

Community

1
1

answered Sep 02 '15 at 23:33

srussking

346
4
10

score 2 · Answer 5 · edited May 23 '17 at 12:02

2

Gary's answer did it for me: https://stackoverflow.com/a/21176470/3656694

Then running addthis.toolbox('.addthis_toolbox') re-initialized addthis for me.

Hope this helps someone! :)

edited May 23 '17 at 12:02

Community

1
1

answered Feb 09 '16 at 21:18

RestlessWeb

143
1
8

This worked for me... I wanted to share that I have the addthis as an individual component so I can apply it to multiple pages so this is how I ended up having this: `let addscript = document.createElement('script'); addscript.type = 'text/javascript'; addscript.setAttribute( 'src', '//s7.addthis.com/js/300/addthis_widget.js#pubid=###' ); document.body!.appendChild(addscript); window.addthis.toolbox('.addthis_toolbox');` – bluePearl May 28 '21 at 16:52

score 2 · Answer 6 · answered Oct 10 '16 at 15:49

In order to work with ajax load and/or multiple addthis instances on the same page you need to insert the elements inside the div:

<div class="addthis_toolbox" data-url="domain.com" data-title="title">
    <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>

and then after your ajax is done run addthis.toolbox('.addthis_toolbox')

score 1 · Answer 7 · answered Feb 12 '14 at 05:00

1

You can use live method.

With jQuery 1.4.2 $('.eventSelect').live('change', function(){ works with FF, Safari, Opera, but not for IE

answered Feb 12 '14 at 05:00

Chirag Parekh

498
6
13

score 1 · Answer 8 · answered Sep 24 '17 at 14:21

If you are using the AddThis share buttons, you might have noticed that once you initialize it on page load, it does not really work for content that is loaded via ajax after the fact.

i.e. AddThis is unaware of fresly loaded content. The fix for this is pretty simple. Just ask AddThis to refresh as follows, and it will automatically regenerate the correct share links for newly loaded content

addthis.layers.refresh();

score 1 · Answer 9 · answered Apr 25 '18 at 10:44

I realized that my adblocker was responsible for

if(typeof addthis !== 'undefined') { addthis.layers.refresh(); }

not working. (addthis.layers.refresh was undefined.) This is strange since I have the exact same code on 4 sites, but only on the one it doesn't work. So if you are having problems, try turning off your adblocker to see if anything changes.

The code Alex posted worked for me when I had my adblocker turned on (uBlock origin). I decided to run it as follows, so that I do it the "right" way and only if it won't work, then run the alternative way.

if (typeof addthis !== 'undefined') {
    if (typeof addthis.layers.refresh !== 'undefined' && $.isFunction(addthis.layers.refresh)) {
        addthis.layers.refresh();
    } else {
        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/YOURLINK");
    }
}

score 0 · Answer 10 · answered Nov 01 '16 at 01:27

i resolve this! Link of Documentation

addthis_share.title = 'title of shared object';
addthis_share.url = 'URL to share';
addthis_share.description = 'description of shared';
addthis_share.swfurl ='URL of a Flash object to share, along with the link';
addthis_share.width ='ideal width of any provided Flash object';
addthis_share.height ='ideal height of any provide Flash object';
addthis_share.email_template ='name of template to use for emailed shares ';
addthis_share.email_vars ='associative array mapping custom email variables to values ';

<script type="text/javascript">
    var addthis_share = addthis_share||{
            url_transforms : {
                clean: true
            }
        };
</script>
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e9c308d658c185a&async=1"></script>

AddThis not working after ajax load

10 Answers10

Linked