Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Trigerring page:fetch event when fetching from cache #62

Closed
pomartel opened this Issue Oct 2, 2012 · 9 comments

Comments

Projects
None yet
4 participants

pomartel commented Oct 2, 2012

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.

Contributor

dhh commented Oct 2, 2012

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 commented Oct 2, 2012

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.

Contributor

dhh commented Oct 2, 2012

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

Contributor

dhh commented Oct 2, 2012

Sorry, #61.

pomartel commented Oct 2, 2012

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 Oct 2, 2012

m4n commented Oct 7, 2012

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?

@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)

@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