Reputation: 1482

AddThis not working after ajax load

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:

Upvotes: 11

Answers (10)

VoidZA

Reputation: 197

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

Upvotes: 1

Ahmet Bozdoğan

Reputation: 31

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

Upvotes: 1

Jan Šafránek

Reputation: 913

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

Upvotes: 8

Michel Dos Santos Kuguio

Reputation: 1

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>

Upvotes: 0

Claudiu Creanga

Reputation: 8366

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

Upvotes: 2

RestlessWeb

Reputation: 143

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! :)

Upvotes: 2

srussking

Reputation: 356

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

Upvotes: 4

Alex

Reputation: 1073

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

Upvotes: 4