Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Trigerring page:fetch event when fetching from cache #62

Closed
pomartel opened this Issue · 9 comments

4 participants

@pomartel

Shouldn't the page:fetch event be triggered when the page is fetched from the cache? Right now, the event only seems to trigger when the page is fetched from the server.

@dhh
Owner
dhh commented

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
Owner
dhh commented

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

@dhh
Owner
dhh commented

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!

@pomartel pomartel closed this
@m4n
m4n commented

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.