I understand that I can call the following code on Turbolinks 5 but it changes the scroll position. Is there a way to call Turbolinks to refresh the page and not change the scroll position?
Turbolinks.visit(location.toString());
This will do what I want, but was hoping to use Turbolinks
window.location.reload()
Store the current scroll position before calling visit
, then when the page loads, scroll to that stored position. Resetting the stored scroll position to null
ensures that subsequent page loads will not scroll to an old position. One possible implementation might be:
var reloadWithTurbolinks = (function () {
var scrollPosition
function reload () {
scrollPosition = [window.scrollX, window.scrollY]
Turbolinks.visit(window.location.toString(), { action: 'replace' })
}
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition)
scrollPosition = null
}
})
return reload
})()
Then you can call reloadWithTurbolinks()
.
To prevent the page from flickering as it scrolls from the top to the desired position, add the no-preview
cache directive in the page's head
:
<meta name="turbolinks-cache-control" content="no-preview">
It's bene a while, not sure if you would still need a solution. You can try this, which disable/enable scrolling before and after loading page content:
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
My answer is based on Dom Christie's answer, with restored focus after reload and getting the scrollPosition just before rendering.
Store the current scroll position and active field item before rendering the new page, then after the the is rendered, scroll to that stored position and restore the focus. Resetting the stored scroll position and focusId to null ensures that subsequent page loads will not scroll to an old position/ Focus.
Note that the fields must have assigned ids in order to recover the focus.
var reloadWithTurbolinks = (function () {
var scrollPosition;
var focusId;
function reload() {
Turbolinks.visit(window.location.toString(), {action: 'replace'})
}
document.addEventListener('turbolinks:before-render', function () {
scrollPosition = [window.scrollX, window.scrollY];
focusId = document.activeElement.id;
});
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition);
scrollPosition = null
}
if (focusId) {
document.getElementById(focusId).focus();
focusId = null;
}
});
return reload;
})();
Then you can call it like this:
setInterval(function () {
reloadWithTurbolinks();
}, 3000);
I combined it with the 'data-turbolinks-permanent' attribute on the form. I also use <meta name="turbolinks-cache-control" content="no-preview">
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With