I have a rails 3.1 application where I want to allow users to share items via Twitter, Google+ and Facebook (HTML5 version of the like button). I have it working great on the show page for the item (i.e. - just showing that one item), but I'm having issues on a container page that loads the items in a list via Ajax. I want to have separate share buttons next to each item in the container.
The first time the page loads, the share buttons show up fine next to each item. It's only when I reload the container via ajax that my issue arises. The Twitter, Google+ and Facebook buttons do not show up. Here's how I have this set up:
application.html.haml
-# This is right before the body tag closes
= render 'site/share_js'
_share_js.html.erb (code from each provider)
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<%# Twitter %>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<%# Google+ %>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
_share_buttons.html.erb (URL of the item to share is passed in)
<div class="share-buttons">
<%# Twitter %>
<a href="https://twitter.com/share"
class="twitter-share-button"
data-lang="en"
data-count="horizontal"
data-text="<%= share_text %>"
data-url="<%= bly_url %>">
Tweet
</a>
<%# Google+ %>
<g:plusone size="medium" href="<%= full_url %>"></g:plusone>
<%# Facebook %>
<div class="fb-like"
data-href="<%= full_url %>"
data-send="true"
data-layout="button_count"
data-width="75"
data-image="<%= image_path_here %>"
data-show-faces="false"></div>
</div>
If I use the share_buttons partial on the item's show page or the first time the container loads, it works great:
_my_item.html.haml
-# other code here that displays the item...
= render :partial => 'site/share_buttons', :locals => share_info_hash
But, as I alluded to above, it doesn't work as well after the ajax action:
my_ajax_action.js.erb (called via format.js in the controller)
$("#item-container").html("<%= escape_javascript(render :partial => "my_item", :collection => @item_list)%>");
The items all display correctly in the container, but the share buttons aren't displaying. I'm guessing that the issue is that provider specific javascript needs to run after executing the ajax action. I've tried placing the provider javascript inside the my_ajax_action.js.erb file after the html is refreshed, but this doesn't seem to do the trick. Does anyone have any ideas on how I could get this to work? Any assistance is much appreciated!