facebook like firing multiple times after new page load about turbolinks-compatibility

[reed]

You're right that there's a problem with the current solution if you use jquery.turbolinks. But I run into errors (like the one you mentioned) when I move the document binding outside of page ready. How exactly did you change the solution to where you weren't seeing any errors?

What if we implemented something like this?

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

That seemed to work for me, with or without jquery.turbolinks. Does it work for you?

[evie404]

Just realized that I forgot to paste my workaround. I think what we did was similar in that they both bind the document event once.

Your's will check if it is already binded already each time, whereas mine only binds on first load.

fb_root = null

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     : 'APP_ID'
    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
    status    : true
    cookie    : true
    xfbml     : true

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

Did some testing with both of our code. The Unsafe JavaScript attempt to access frame with URL error seem to turn up once in a while, regardless of document binding or using jquery.turbolinks or not. It might be a bug from facebook itself or a bug between facebook and turbolinks.

The problem with the old compatibility fix is that it will keep triggering the error in an infinite loop, I suspect it has to do with race condition of turbolinks load events.

Good news is, both of our solutions seem to prevent the error from entering an infinite loop!

[reed]

Alright, I updated the solution. I went with my code just because I like to avoid executing JS before page ready whenever I can. Thanks for bringing this issue to my attention, and for helping me resolve it.

[evie404]

No problem! Glad was of help :)

Sent from my iPhone

On Feb 24, 2013, at 7:24 PM, Nick Reed [email protected] wrote:

Alright, I updated the solution. I went with my code just because I like to
avoid executing JS before page ready whenever I can. Thanks for bringing
this issue to my attention, and for helping me resolve it.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/3#issuecomment-14024026.