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: 

Handcraft

@jogesh_pi Can you please explain?? – Handcraft

window.addthis = null;, do you mean to remove Dom? And $.getScript(script);, do you get back the button in script? – Majestic

@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. – Hayner

Yes.I found it from the documentation.. – Handcraft

Answer 1

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

Kirbykirch

this should be the approved comment. – Saccharoid

Answer 2

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

Curriery

Answer 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

To

Answer 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')

Hedrick

Answer 5

Gary's answer did it for me: https://mcmap.net/q/690122/-change-addthis-url-dynamically-with-jquery

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

Hope this helps someone! :)

Misunderstood

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'); – Riana

Answer 6

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

Baldridge

Answer 7

You can use live method.

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

Amyloid

Answer 8

If you are using the AddThis share but­tons, you might have noticed that once you ini­tial­ize it on page load, it does not really work for con­tent that is loaded via ajax after the fact.

i.e. AddThis is unaware of fresly loaded con­tent. The fix for this is pretty sim­ple. Just ask AddThis to refresh as fol­lows, and it will auto­mat­i­cally regen­er­ate the cor­rect share links for newly loaded content

addthis.layers.refresh();

Capablanca

Answer 9

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

Riki

Answer 10

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>

Brisson