ajax - 如何在通过 ajax 加载页面后显示 Twitter/Facebook/Google+ 按钮？

Question

我有一个 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(通过 Controller 中的 format.js 调用)

$("#item-container").html("<%= escape_javascript(render :partial => "my_item", :collection => @item_list)%>");

这些项目都在容器中正确显示，但未显示共享按钮。我猜问题是在执行 ajax 操作后需要运行特定于提供程序的 javascript。我尝试在 html 刷新后将提供程序 javascript 放在 my_ajax_action.js.erb 文件中，但这似乎并没有奏效。有没有人对我如何让它发挥作用有任何想法？非常感谢任何帮助!

Answer 1

您尝试呈现的按钮使用搜索和替换技术。当onload发生时页面上已经存在成为按钮的元素时，这无需任何特殊干预即可工作。

但是，在您的情况下，在执行替换脚本后插入成为按钮的元素。由于顺序与脚本预期的不同，您需要在将新按钮添加到页面后自己触发渲染。

以下是一些文档链接，这些文档解释了如何为每个服务执行此操作:

Google +1 按钮 :https://developers.google.com/+/plugins/+1button/#example-explicit-load

Facebook Like 按钮 :http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

推文按钮 :嗯，我在文档中找不到这个，但根据一些论坛事件，这看起来像你正在寻找的代码:

twttr.widgets.load();

(请参阅此处的相关论坛帖子:https://dev.twitter.com/discussions/890)