CODEWITHSUNDEEP
javascriptaddthis
Avtandil Kavrelishvili
Avtandil Kavrelishvili

Reputation: 1757

Addthis is Undefined when I use addthis, When I load page by Ajax

I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.

I searched a lots of fixes but no one works for me. one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.

please give me smart advice what's happen and how can I fix it ?

Code (it's a partial view which load from ajax Call):

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>

<div class="addthis_sharing_toolbox"></div>

<script>
 addthis.toolbox(); // addthis - is undefined
</script>

error screen

Upvotes: 1

Views: 7605

Answers (2)

Avtandil Kavrelishvili
Avtandil Kavrelishvili

Reputation: 1757

I have fixed this problem.

In my project I have 3 View level

  1. _layout
  2. View
  3. _partialview

I had addthis Js reference and button's Div inside the _partialView.

But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).

Hare is full example:

View:

    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code

_partialView:

//Some Code 
<div class="addthis_sharing_toolbox"></div>

<script>
    $(function() {
        addthis.init(); 
        addthis.layers.refresh(); 
      });
</script>

Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.

Upvotes: 4

Matt
Matt

Reputation: 44

The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.

Alternatively, you could add the async attribute this way:

<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">

Then before you call addthis.toolbox(), make sure you call addthis.init().

https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/

-Matt

AddThis Support

Upvotes: 2

Related Questions