How to refresh a page with Turbolinks

Question

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

Answer 1

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">

Answer 2

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">.

Answer 3

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