Как я могу заставить кнопки Twitter/Facebook/Google+ отображаться после загрузки страницы через ajax?

У меня есть приложение 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, но, похоже, это не помогло. У кого-нибудь есть идеи о том, как я могу заставить это работать? Любая помощь очень ценится!


person George S    schedule 19.12.2011    source источник


Ответы (1)


Кнопки, которые вы пытаетесь отобразить, используют метод поиска и замены. Это работает без какого-либо специального вмешательства, когда элементы, которые становятся кнопками, уже существуют на странице, когда происходит загрузка.

Однако в вашем случае элементы, которые становятся кнопками, вставляются после выполнения сценария замены. Поскольку порядок отличается от ожидаемого скриптами, вам нужно будет самостоятельно запустить рендеринг после того, как вы добавите новые кнопки на свою страницу.

Вот несколько ссылок на документы, объясняющие, как это сделать для каждой службы:

Кнопка Google +1: https://developers.google.com/+/plugins/+1button/#example-explicit-load

Кнопка «Мне нравится» в Facebook: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Кнопка «Твитнуть». Я не могу найти ее в документации, но, судя по активности на форуме, она выглядит как код, который вы ищете:

twttr.widgets.load();

(см. соответствующий пост на форуме здесь: https://dev.twitter.com/discussions/890)

person mimming    schedule 20.12.2011