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

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

4 голосов
/ 19 декабря 2011

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

1 Ответ

8 голосов
/ 20 декабря 2011

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

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

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

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

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

Кнопка Tweet : Ну, я не могу найти это в документах, но, исходя из некоторых действий на форуме, это выглядит как код, который вы ищете: 

twttr.widgets.load();

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

...