Making the Addthis widget in ajax response even in jQuery dialog

22 June 2011 by Jinesh Parekh No comments

It is known that the addthis widget does not work when loaded in a ajax call. In order to make it work, you have to reinitialize or reload the addthis_widget.js file. Below is how you could do it:

In your application.js file or the parent page that is making the ajax call, add the below code:

 AddthisInitializer.prototype.initializeAddThis = function() {

var script = 'http://s7.addthis.com/js/xxx/addthis_widget.js#domready=1'; 
 if ( window.addthis ) { 
 window.addthis = null; 
 } $.getScript( script ); 
}
Then to use it in the HTML that is rendered back in your ajax call, you want to render 
the add this icons. Use it like below:
<a addthis:url='http://wherever_you_want_to_go.com' 
href="javascript:void(0)" class="addthis_button_facebook">
 <img src="http://facebook_logo.gif"/>
</a>
<a addthis:url='http://wherever_you_want_to_go.com' 
href="javascript:void(0)" "addthis_button_twitter"> <
img src="http://twitter_logo.gif"/> </a>
<a addthis:url='http://wherever_you_want_to_go.com' 
href="javascript:void(0)" class="addthis_button_tumblr">
 <img src="http://tumblr_logo.gif"/>
</a> 
... and so on.
<script type="text/javascript"> 
 var initializer = new AddThisInitializer();
 $(document).ready( function() {
 initializer.initializeAddThis(); 
 } );
</script>

Jinesh Parekh

Founder CEO, Idyllic.

Follow me on Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)