Comments (14)
Wouldn't it also be helpful to have a before-change event like there is in pjax? This way I could put the FB tags in a variable and reinject them when the page:change event is triggered. Not yet sure this is the best way to proceed it would add some flexibility.
from turbolinks-classic.
I've tried all these and more (fb and twitter). They do nothing until I reload the page - then they show up. How to make them fire without a page-reload?
from turbolinks-classic.
For anyone using the new turbolinks gem see this issue
from turbolinks-classic.
There's a page:change event being thrown when turbo links changes the page. You can use that to refire any hooks you might need.
On Sep 27, 2012, at 8:55 AM, Pierre Olivier Martel [email protected] wrote:
This is not really a Turbolinks issue but a problem I guess many will run into using the Facebook JS SDK. The SDK is initiliazed inside the HTML body like this: https://developers.facebook.com/docs/reference/javascript/
When the SDK initializes, it creates a fb-root iframe tag to communicate with the FB API. When Turbolinks reloads the page, the fb-root tag vanishes and there doesn't seem to be a way trigger the re-initilialization of the Facebook sdk.
I'm trying to figure out the best way to handle this. Can an element of the body remain in between two requests? How can inline javascript be executed? (Let me know I should repost to Stack Overflow instead)
—
Reply to this email directly or view it on GitHub.
from turbolinks-classic.
Yeah, I could see something like that. We've thought about page:changing and page:changed.
On Sep 27, 2012, at 9:25 AM, Pierre Olivier Martel wrote:
Wouldn't it also be helpful to have a before-change event like there is in pjax? This way I could put the FB tags in a variable and reinject them when the page:change event is triggered. Not yet sure this is the best way to proceed it would add some flexibility.
—
Reply to this email directly or view it on GitHub.
David Heinemeier Hansson
from turbolinks-classic.
This page has a good solution that I am using: http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus
from turbolinks-classic.
Might as well post it as well:
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
}
else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
from turbolinks-classic.
So basically you have to reload the FB SDK on every page load? One of the reasons why i wanted to use turbolinks was to save the time it takes to initialize it.
from turbolinks-classic.
@eugenemiretsky does this work for you?
reednj77.github.com/turbolinks-compatibility/facebook.html
from turbolinks-classic.
@reednj77 Hey, that link didn't work, but I'd really like to see what you've got.
from turbolinks-classic.
Sorry, I messed up the markup. Try this:
reed.github.com/turbolinks-compatibility/facebook.html
from turbolinks-classic.
Thanks, I appreciate it!
from turbolinks-classic.
should replace the link to:
http://reed.github.com/turbolinks-compatibility/facebook.html
from turbolinks-classic.
I was able to resolve the issue like so:
Add the jquery-turbolinks
gem to your Gemfile
:
# See http://stackoverflow.com/a/18834209/784318
gem 'jquery-turbolinks'
Now all jQuery document reaady callbacks will be called in case of a turbo-link click event.
# /application/_facebook_init.html.slim
coffee:
# This line below is crucial because otherwise this code won't be reached in case of a turbo-link click
$ ->
((d, s, id) ->
js = undefined
fjs = d.getElementsByTagName(s)[0]
if d.getElementById(id)
return
js = d.createElement(s)
js.id = id
js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=[SOME_APP_ID]&version=v2.0'
fjs.parentNode.insertBefore js, fjs
return) document, 'script', 'facebook-jssdk'
from turbolinks-classic.
Related Issues (20)
- Page does not always scroll to the top when DOM loads too fast
- SVG anchors not working with turbolinks
- Turbolinks.visit, partial replacement & relative urls (& IE11)
- Not correctly inferring protocol with SSL, unless force_ssl is set HOT 2
- Redirect and reload full page HOT 1
- JavaScript part of turbolinks on npm HOT 11
- Enable Turbolinks on a-tags after adding content over AJAX HOT 1
- File type blacklist instead of whitelist
- Scroll position of data-turbolinks-permanent elements lost on navigation. HOT 3
- Webpage without title, after turbolink has title of undefined HOT 1
- Problems with JS HOT 1
- Rails 5 deprecations
- Would you please tell me how to add your library or whether it's necessary to add this library?
- Sorry for duplicate
- Progress bar causing capybara tests to fail
- Documentation does not explain how to install current turbolinks-classic version HOT 1
- temporary inside permanent
- Clicking browser back button from an error page to a non-error page, retains the styles of the error page
- Turbolinks.enableProgressBar() returns undefined
- How to binding "page:load" cache-preview
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbolinks-classic.