turbolinks / turbolinks-classic Goto Github PK
View Code? Open in Web Editor NEWClassic version of Turbolinks. Now deprecated in favor of Turbolinks 5.
License: MIT License
Classic version of Turbolinks. Now deprecated in favor of Turbolinks 5.
License: MIT License
HTML compresses well, dont waste the users bandwidth!
After making a post action which don't redirects you (error messages i.e), if you navigate to any link and then hit refresh, the browser (Chrome at least) tries to refresh the current url with a post request.
Thanks for all the awesome stuff you are sharing <3
Matt
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.
There are some pushState-related differences from Mobile Safari in Chrome for iOS that cause Turbolinks not to work. Here's what I've found:
rememberInitialPage
runs on the first call to visit
in Mobile Safari, but in Chrome for iOS it runs as soon as the page loads.window.history.state
access in rememberCurrentState
reflects the state that was set in the previous call to replaceState
in rememberCurrentUrl
. In Chrome for iOS, window.history.state
is null in rememberCurrentState
, so currentState
is null too.currentState
is null in Chrome for iOS on the first call to visit
, cacheCurrentPage
fails. If you explicitly call Turbolinks.visit
, the end result is the page never loads. If you click a link, it will fall back to a full page load.I have using https://github.com/desandro/masonry in my project rails.
I have added this marvelous gem is incredible fast 👍 but masonry elements are not loaded successfully :(.
how we can solve this problem? Thank you very much!
Hi,
I tried to get Turbolinks working on a project I'm playing around with but I couldn't figure why it didn't worked. Then I grabed this example project from Railscasts and searched along. It seems that as soon as I add an embeded Twitter button Turbolinks stops working. Is there any workaround or fix?
Thanks
It seems that when you click on a link where a 302 redirect is made, the content is changed but the url in the browser reflects the url before the redirect.
Example :
http://example.com/carts/42/line_items?item_id=123
http://example.com/my_cart
http://example.com/carts/42/line_items?item_id=123
in the navbarHi,
Currently turbolinks replaces only body and title as far as I know.
I needed to also replace other meta tags such as opengraph and HTML5 microdata.
<meta property="og:title" content="Article title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://news.com/items/1228"/>
<meta property="og:site_name" content="News Agency"/>
<meta property="og:description" content="news"/>
<meta property="article:tag" content="Science"/>
<meta property="og:image" content="https://url.to/thumb.jpg"/>
What would be the best approach? maybe use javascript?
I've got an implementation of turboforms working which hijacks all 'normal' forms on the page and sends then asynchronously, replacing the body with the result. This example is rails-specific but could be made generic:
extractUrlTitleAndBody = (content) ->
doc = createDocument content
url = doc.querySelector('meta[name=currentPath]').getAttribute('content')
title = doc.querySelector 'title'
[ url, title?.textContent, doc.body ]
setContent = (url, title, body) ->
cacheCurrentPage()
reflectNewUrl url
changePage title, body
turboforms = () ->
$('form:not([data-remote]),a[data-turboform]').each (index, el) =>
el = $(el)
el.attr('data-remote', 'true')
el.bind 'ajax:beforeSend', (event, data, status, xhr) =>
triggerEvent 'page:fetch'
el.bind '[RemoteForm] ajax:success', (event, data, status, xhr) =>
setContent extractUrlTitleAndBody(xhr.responseText)...
triggerEvent 'page:load'
It raises two questions
Perhaps a data-no-turbolink
on the body
element?
If linked to digested image files (like in a photo gallery), the filter for .html extension does not work because it ends in something like ?dafdfeadfe , need to change match string to look before ?
I have the following in my layout:
%a{href: user_applications_path, data: {confirm: 'Are you sure you want to navigate away from this page? All unsaved data will be lost.' }}
When this link is clicked, an alert is displayed, as-expected. However, if I click 'Cancel', the link is followed. The expected behavior is not to follow the link, right?
As a note, this was working with rack-pjax.
You will now be looking at Page 2 but Page 1's address is in the address bar.
This happens for me in Firefox 16, Chrome 22, and Safari 6.
Turbolinks' page cache ids (state.position values) start at window.history.length - 1. When you hit the back button, window.history.length doesn't change. Hitting reload makes Turbolinks restart its id numbering at window.history.length - 1. Certain dances involving back and reload can cause two different pages to have the same state.position in the browser's records, making Turbolinks pull the wrong page from its own cache.
In the case above, assuming you started with a new tab, window.history.length == 3 from step 2 onward. In step 5, Turbolinks tells the browser Page 1's state.position is 2. In step 7, Turbolinks tells the browser Page 2's state.position is also 2. Turbolinks puts Page 2 in its cache, then processes the popstate event to load Page 1. Since Page 1's state.position is 2, it just pulls Page 2 out of the cache, thinking it's Page 1.
Instead of window.history.length-1, you could use new Date().getTime()
If you have a script tag at the bottom of a form...to say initialize custom elements in the form. This script tag is not being evaluated from a turbolink. It is not a dom ready issue, it simply does not get evaluated by the dom writer.
Not sure what the issue is here, difficult to track down. If i put a script tag at the top of the body element it seems to evaluate it. its down further where it does not.
Hi, I looking for the best way to do that.. don't know if it could be fixed in turbolinks, in bootstrap, or anywhere...
But, I recently created a question in stackoverflow, and found that's the strange behavior is because the way of modal plugins of bootstrap were implemented.
Maybe it is a possible hack to do with that, to made it work...
It appears Safari 5.1.7 does not support window.history.state
which was introduced in commit 185dec1. Since it degrades gracefully I can understand if you don't want to support this version, but I wanted others to be aware of it in case they try to test Turbolinks behavior on this version.
Perhaps it should state somewhere in the readme which browser versions are supported? This can help when developers are testing and debugging on various browsers. If developers are unknowingly using an unsupported browser they would not notice JavaScript that is incompatible with Turbolinks.
<a href="/users" class="btn btn-danger float_right" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Cancel my account</a>
When I click on this link and then click cancel on the confirmation popup a GET request is made to /users instead of canceling the request.
If I click ok in the confirmation popup the delete is processed correctly. Using a full url instead of the relative path for the href, removing turbolinks, or adding data-no-turbolink fix this issue.
Based on the documentation shouldn't turbolinks catch this since I have data-confirm and data-method in the link?
This is the devise cancel my account link from the template it generates.
If you're on / and then for example click the logo which is a link to / then we end up with a full page load because turbolinks is ignoring it.
Is this expected behaviour?
In my application (as in most applications), my ApplicationController handles authorization.
I have a before_filter method in my UserSessions controller:
before_filter :require_guest, only: [:new, :create]
which calls the method within ApplicationController:
def require_guest
redirect_to user_path, notice: 'You are already registered and logged-in.' if current_user
end
This keeps people from trying to log-in when they're already logged-in.
When turbolinks is active, the redirect happens in the browser window and an alert is shown to the user (expected behavior). However, the URL in the address bar still shows 'site.com/login' (the URL for UserSessions#new).
I'm unfortunately no expert, but it seems like if a background on body is set, it does not get changed with Turbolinks
I installed turbolinks and making some tests to see it in action. Although I realized many links are being requested twice. What can I do in order to debug and help this development? I remember this also happening when using pjax. Any tips?
In Chrome, the history limit is apparently 50, and when we reach this limit, this line :
delete pageCache[currentState.position - limit] if currentState.position == window.history.length - 1
doesn't work anymore, so the pageCache grows out of its limit of 10.
I use LiveReload for instantly updating CSS, etc changes on my Rails sites.
I've just installed turbolinks on one of my Rails apps and the page just shows blank when clicking any links.
When removing the LiveReload script from the footer the site works OK and wow the site is much faster!
It looks like the page:change event may have been removed by accident.
Javascript libraries like Twitter Bootstrap put event listeners on body.
Such as:
https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js
https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js
By replacing body, these event listeners are removed and events aren't handled after a page is changed.
Replacing the body's innerHTML with the replacement body's innerHTML has the correct functionality in these situations. But then you sacrifice cases in which you want to change the body element, its attributes, and listeners.
Perhaps there could be a data attribute on body which configures body replacement for the uncommon case. For example, you could specify data-turbolinks-replaceinner="true"
on body and when the page is replaced, it replaces the body's innerHTML and leaves the body element with its listeners.
WDYT?
I have a slider of images with jCarouselLite, this stopped working after adding Turbolinks to the project.
All though this is the only page where the jCarouselLite slider isnt working:
$('#employees_slider').jCarouselLite({
auto: 0,
visible: 4,
start: 0,
speed: 2000,
btnNext: ".right",
btnPrev: ".left"
});
= link_to (image_tag 'left.png', :class => 'left', :width => "48"), ""
= link_to (image_tag 'right.png', :class => 'right', :width => "48", :style => "float:right;"), ""
#employees_slider
%ul.employee_images
- @employees.each do |employee|
%li{:style => "width:200px !important;margin-right: 25px !important;"}
- if !employee.remote_image_url.nil?
= image_tag employee.remote_image_url, :id => "employee_#{employee.id}", :class => "employee_image"
- else
= image_tag employee.image, :id => "employee_#{employee.id}", :class => "employee_image"
%p.employee_info{:id => "info_#{employee.id}"}
= employee.name
%br/
= employee.title
%br/
%b=t ".email"
= employee.email
%br/
%b=t ".phone"
= employee.phone
It's really annoying then you visit a link with shorter content and being greeted with a blank page, having to scroll up to see the content. I just experimented with resetting the scroll position to 0,0 on successful fetch and it feels much more natural:
xhr.onload = ->
changePage extractTitleAndContent(xhr.responseText)...
reflectRedirectedUrl xhr
resetScrollPosition()
triggerEvent 'page:load'
resetScrollPosition = ->
window.scrollTo 0, 0
Turbolinks should keep an index of external assets from the first page hit. Imagine these two assets declared in the HEAD:
<link href="https://d3dma7a8zw52bz.cloudfront.net/assets/application-9ce82b8e23611aebdd79033e8063d82f.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://d3dma7a8zw52bz.cloudfront.net/assets/application-983dc7ef267ab91bed1488896e7a6f6c.js" type="text/javascript"></script>
Turbolinks should extract the two urls and then compare each subsequent request against them. If there's a change in the URL, it should do a full page reload instead of just turbolinking, such that the new CSS or JS can be reflected.
Hi - I've been using Pjax in a limited scope for a while, but only just started trying out Turbolinks in our app, so forgive me if I'm missing something.
I'm struggling with the assetsChanged method always returning true for pretty much any two pages on our site, which then results in Turbolinks doing a full page reload. We have a number of oembed <link> tags in our pages, as well as specialised RSS <links> for differing areas of the site, and some legacy Facebook <link> tags like rel=image_src.
I'm wondering if it would make sense to be able to tell Turbolinks to ignore link tags with certain type
or rel
attributes (eg "application/xml+oembed"). There are obvious problems with that approach - eg the ombed tags would still refer to an old page, but since they're intended for machine consumption only perhaps it doesn't matter. (RSS is a bit trickier... ideally you might replace the old RSS tags in the head with the new ones, though I'm not even sure if browsers would notice the change. Maybe that doesn't matter though, since having an RSS button in your browser chrome seems to be rapidly disappearing.)
Any thoughts? Or am I doing it wrong?
I just updated to the latest and I started getting full page refreshes, I tracked this down to the assetsChanged function which is always returning true because of the async js I'm loading which is present in the cached document but not present in the newly fetched version.
This is breaking for the YouTube API and Google Analytics at the moment. Trying to see if I can find a solution..
I'm trying to integrate the new Stripe Button as described here : https://stripe.com/docs/button
The button shows up fine on a fresh page load but doesn't show at all when the page is loaded with Turbolink. here is the exact code :
<form action="/charge" method="post">
<script src="https://button.stripe.com/v1/button.js" class="stripe-button" data-key="YOUR_KEY"></script>
</form>
The JS file has no initialization method. It just executes when it's loaded. Is that a use case that should work with Turbolinks? I see inline JS should load fine but I'm not sure about external scripts.
Links with data-method="delete" are resulting in a GET and a DELETE at the moment. If i add data-no-turbolink it does the right thing but it seems unnecessary.
Hi,
I'm having issues with fancyBox integration.
When I reload gallery page everything works as expected.
When I go to gallery page using turbolink the image preview modal is not working.
I'm not getting any js errors.
Here is my application.js
document.addEventListener("page:load", function(){
init('load');
});
document.addEventListener("page:change", function(){
init('change');
});
$(document).ready(function() {
init('ready');
});
function init(msg) {
$("a.fancybox").fancybox();
alert(msg);
}
Thanks in advance,
Marek
I'm probably missing something, but it does not seem that page:load is triggered on reload or back (or on first load) of a page.
Is this what is supposed to happen? And if so, what is the best way to catch these events using page:load?
Thanks!
Code used in application.js:
document.addEventListener("page:load", function(){
alert("loaded");
})
I've just hacked together a quick implementation of specifying a configurable cache element, so you can do something like this:
Turbolinks.setup({cache_id: 'main_container'});
For instances where you don't want to refresh the entire body. I have this requirement on two projects I'm working on so thought it might be a common case. Thoughts?
<%= link_to "Cancel", :back %>
generates a link to the current page
Today my turbolinks just stopped working. Everything worked yesterday and I have not done any updates. Turbolinks do not even work when i disable all my other javascript files (I use Rails 3.2.8 and have commented out everything exept jquery, jquery_ujs and turbolinks in my application.js).
I have tried to trigger turbolinks manually with Turbolinks.visit(path) but it is the same.
Now when i click on a link, the browser makes a GET request with the new page like it's expected to do but the get response contains the full page and not only the body. After the get request are done, browser do a full page reload.
I have set a brek point in firebug (line 14) to test if the broswer support pushstate and it does, breakpoint never triggered.
I have uninstalled the gem, cleared catch, tested in FireFox 16.0.1, Chrome 22.0.1 and Safari 6.0.1, everything are the same!
Please, help me to solve this really annoying problem. I haven't done any changes since yesterday and then everything worked fine.
Edit,
I installed Oh My ZSH yesterday but guess it does not matter.
Just a thought, how does google analytics behave to this? Does the analytics snippet need changed in order to work?
Or do we handle this another way?
Any chance? Like slides, fades and other fancy stuff?
Works fine in Chrome on Ubuntu. Firefox 15 on Ubuntu returns a white screen, you can reload the page to get the requested page.
So following the idea from the readme: "So if you wanted to have a client-side spinner, you could listen for page:fetch to start it and page:change to stop it."
Probably startSpinner() would insert some element ("Loading…") into the body. However as on page:change, the body has been replaced, so the inserted object would have been gone. I do not see an easy and obvious way to gracefully end the spinner, it would just disappear.
Something else:
For action specific javascript, I usually have a siteName.controllerName.actionName js namespace and would call its init() method from the view.
How would I translate that to turbolinks? I have not the slightest idea, what controller or action is served to me (if not by some hack, where I would place some
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)
Found an odd bug but I can't seem to track down how to fix the problem.
You'd expect to see the other.html
page which is a single link, but nothing changes and instead you see the content for index.html
Related to #58 (JS script tags of pages visited with turbolinks are executed).
If you observe events in one of these script tags, when you go to another page, the event handler is not removed.
It's problematic, for different reasons, one of them is that if you come back to this page, the event handler are executed twice (or three times if you come back another time, etc.)
Just leaving some notes for some things i noticed when using jQuery ui components (particularly the datepicker)..
When a page has changed, the .datepicker has not reinitialized because it doesnt check to see if its datePicker div has been removed from the dom, but it has.
To correct this you can do something like this...
jQuery.datepicker.dpDiv.appendTo( jQuery('body') );
I updated this solution per @rpflorence ... thanks for the catch.
Turbolinks seems to loose the anchor on page:change.
Given a link href="/foo/bar#100" it will show this link in the URL until page:change is triggered.
After that it's just "/foo/bar".
Could someone confirm this behaviour?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.