Trigerring page:fetch event when fetching from cache

[turbolinks]

Trigerring page:fetch event when fetching from cache

[dhh]

I'm not sure it makes sense since there's no fetching phase that takes any time. It's yanked immediately from cache.

What are you trying to use it for?

[pomartel]

It's regarding the load of Facebook JS SDK. The SDK creates an iframe that is used to communicate with Facebook. To keep that iframe in between requests, I have to do something like this :

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

pageChanged = ->
  $('#fb-root').replaceWith fb_root

The fetchingPage method would need to be called whenever a page change is triggered (from cache or from the server). This would make things more consistent I guess since page:change is always called no matter if it's fresh or from cache.

[dhh]

Are you sure you still need to do that if we solve #62?

[dhh]

Sorry, #61.

[pomartel]

Ok, I understand what's going on. I detach the fb-root div before the page is cached. When it is fetched for cache, that div doesn't exist anymore in the DOM so the replaceWith call doesn't work. I found a work-around that does not require page:fetch to be called when the page is cached. Thanks for your help!

[m4n]

I found a work-around that does not require page:fetch to be called when the page is cached.

@pomartel I am experiencing the same problem with the fb-root div. Would you mind sharing your specific work-around with the rest of us?

[pomartel]

@m4n, here is essentially my solution. It's been working on my production site for over a month without any glitch. Don't hesitate to drop me a line if you have any question.

fb_root = null #variable use to transfer the state of the fb-root div tag between page requests

$ ->
  load_facebook_sdk()
  $(document)
    .on('page:fetch', fetching_page)
    .on('page:change', page_changed)

fetching_page = ->
  $("body").addClass("wait")
  fb_root = $('#fb-root').detach()

page_changed = ->
  if $('#fb-root').length > 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root
  $("body").removeClass("wait")
  facebook_sdk_loaded()

load_facebook_sdk = ->
  window.fbAsyncInit = initialize_facebook_sdk
  $.getScript(document.location.protocol + "//connect.facebook.net/#{$('#fb-root').data('locale')}/all.js")

initialize_facebook_sdk = ->
  FB.init
    appId      : $('#fb-root').data('app-id')
    channelUrl : $('#fb-root').data('channel-url')
    status     : true
    cookie     : true
    xfbml      : true
  FB.Canvas.setAutoGrow()
  facebook_sdk_loaded()

facebook_sdk_loaded = ->
  $(document).trigger("fb:initialized")
  @scroll_top(150)

[kwantopia]

@pomartel where do you put this coffee script and what do you have in your view?

[pomartel]

@kwantopia More information on the topic here : http://reed.github.io/turbolinks-compatibility/facebook.html