Ajax 加载后未触发 Facebook 应用程序请求对话 (Rails Turbolinks)答案

【问题标题】：Facebook App Request Dialogue not being triggered after Ajax load (Rails Turbolinks)Ajax 加载后未触发 Facebook 应用程序请求对话 (Rails Turbolinks)
【发布时间】：2013-04-19 16:27:59
【问题描述】：

我不知道如何在点击事件后加载 Facebook javascript，这会触发带有 Turbolinks 的 Ajax 请求。

我可以使用我的 Javascript 的其余部分，但这并没有发生。

我在这个代码上使用了各种各样的变体：https://developers.facebook.com/docs/reference/dialogs/requests/

我已经尝试实现这里提到的所有内容： https://github.com/rails/turbolinks/issues/25

我已经尝试过让所有其他 JS 工作的方法相同，即使用 Turbolinks 触发 page:load 调用。

没有任何效果。

【问题讨论】：

在加载页面并单击链接时，您的 JavaScript 控制台中是否出现任何错误？
这取决于我要采用哪种解决方案，但如果我使用开箱即用的方法，我会得到：Uncaught [object Object] all.js:38 i all.js:38 m .isTruthy all.js:38 r all.js:74 q.showLoader all.js:91 ca.iframe all.js:95 o all.js:96（匿名函数） all.js:80（匿名函数）全部。 js:77 sendRequestViaMultiFriendSelector 1:21 onclick

标签： jquery ruby-on-rails ruby-on-rails-3 facebook-javascript-sdk turbolinks

【解决方案1】：

我还发现我的 Facebook 对话框在加载 Ajax 后停止触发，但这与 Facebook 无关。使用 Turbolinks，您必须在 page:load 事件上绑定您的点击处理程序（或者可能在 body 元素上使用事件委托） - 否则它们会丢失。请参阅Railscast on Turbolinks 和“Page Change Events”。

例子：

projects.js.coffee.erb

ready = ->
  $('a').click (event) ->
    alert('do something facebooky')
    event.preventDefault()

$(document).ready(ready)
$(document).on('page:load', ready)

就我而言，我还必须更改 Facebook 的加载方式。请参阅 this issue 和 corresponding solution。这是我的画布应用中的代码。

application.html.erb

<!-- I used no other facebook code -->
<div id="fb-root"></div>

facebook.js.coffee.erb

#
# Get Facebook working with Turbo Links
# see: http://reed.github.io/turbolinks-compatibility/facebook.html
#

fb_root = null
fb_events_bound = false

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless fb_events_bound

bindFacebookEvents = ->
  $(document)
    .on('page:fetch', saveFacebookRoot)
    .on('page:change', restoreFacebookRoot)
    .on('page:load', ->
      FB?.XFBML.parse()
    )
  fb_events_bound = true

saveFacebookRoot = ->
  fb_root = $('#fb-root').detach()

restoreFacebookRoot = ->
  if $('#fb-root').length > 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/en_US/all.js#xfbml=1")

initializeFacebookSDK = ->
  FB.init
    appId     : "<%= ENV['FACEBOOK_APP_ID'] %>"
    channelUrl: "//" + window.location.host + "/channel.html"
    status    : true
    cookie    : true
    xfbml     : true
    frictionlessRequests  : true

  # Listen to the auth.login which will be called when the user logs in
  # using the Login button
  FB.Event.subscribe 'auth.login', (response) ->
    # We want to reload the page now so Ruby can read the cookie that the
    # Javascript SDK sat. But we don't want to use
    # window.location.reload() because if this is in a canvas there was a
    # post made to this page and a reload will trigger a message to the
    # user asking if they want to send data again.
    window.location = window.location


  FB.Canvas.setAutoGrow()

【讨论】：