У меня есть приложение rails 3.1, в котором я хочу разрешить пользователям делиться элементами через Twitter, Google+ и Facebook (HTML5-версия кнопки «Нравится»). У меня он отлично работает на странице показа элемента (т. е. просто показывает этот один элемент), но у меня возникают проблемы на странице контейнера, которая загружает элементы в список через Ajax. Я хочу иметь отдельные кнопки общего доступа рядом с каждым элементом в контейнере.
При первой загрузке страницы кнопки «Поделиться» отображаются рядом с каждым элементом. Моя проблема возникает только тогда, когда я перезагружаю контейнер через ajax. Кнопки Twitter, Google+ и Facebook не отображаются. Вот как у меня это настроено:
application.html.haml
-# This is right before the body tag closes
= render 'site/share_js'
_share_js.html.erb (код от каждого поставщика)
<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 элемента для совместного использования)
<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>
Если я использую партиал share_buttons на странице показа элемента или при первой загрузке контейнера, он отлично работает:
_my_item.html.haml
-# other code here that displays the item...
= render :partial => 'site/share_buttons', :locals => share_info_hash
Но, как я уже упоминал выше, это не работает после действия ajax:
my_ajax_action.js.erb (вызывается через format.js в контроллере)
$("#item-container").html("<%= escape_javascript(render :partial => "my_item", :collection => @item_list)%>");
Все элементы правильно отображаются в контейнере, но кнопки общего доступа не отображаются. Я предполагаю, что проблема заключается в том, что javascript, специфичный для поставщика, должен запускаться после выполнения действия ajax. Я попытался поместить javascript провайдера в файл my_ajax_action.js.erb после обновления html, но, похоже, это не помогло. У кого-нибудь есть идеи о том, как я могу заставить это работать? Любая помощь очень ценится!