Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Turbolinks causes a link with href="#" to trigger page refresh

I have a very simple link on my page. <a href="#">My link</a>. It causes a page refresh. when I remove "turbolinks", it no longer causes a refresh.

I've used links with hash fragments all the time in the past. Unless I've missed something very fundamental for a long time, I don't understand how this can cause a refresh.

It does not have any JS event handlers attached to it.

Any ideas?

It may not matter, but I'm using jQuery, Twitter-Bootstrap, and Ruby on Rails.

Clues so far:

  • When I remove Turbolinks, the link behaves properly (does not cause page refresh).
  • Links with "#" as the URL cause a reload on every page of my app.
  • Links with any "#hasfragmenttext" will cause a single refresh and then the URL of the page is "mypage#hasfragmenttext", any additional clicks do NOT cause page refresh... hmm.
like image 617
Don P Avatar asked Dec 11 '13 04:12

Don P


People also ask

What does Turbolinks do with your browser's history?

Turbolinks saves a copy of the current page to its cache just before rendering a new page. Note that Turbolinks copies the page using cloneNode(true) , which means any attached event listeners and associated data are discarded.

How do I disable Turbolinks?

If you want to disable Turbolinks for certain links, add a data-turbolinks="false" attribute to the tag: < a href = "..." data-turbolinks = "false" >No turbolinks here</ a >.

How does Turbolinks work?

Turbolinks Overview It works by intercepting all link clicks that would navigate to a page within the app, and instead makes the request via AJAX, replacing the body with the received content. The primary speedup comes from not having to download or parse the CSS & JS files again.

Whats Turbolinks?

If you're a Rails developer, chances are that you know Turbolinks. Turbolinks is a flexible and lightweight JavaScript library aimed to make your navigation through webpages faster. Turbolinks improves webpage performance by substituting the common full-page loads for partial loads in multi-page applications.


1 Answers

The above solution didn't work for me but this did :

<a href="#" data-turbolinks="false">My link</a>

This can be found at https://github.com/turbolinks/turbolinks

update: This solution works for turbolinks 5, for classic turbolinks check the previous answer by @wael34218

like image 149
Anto Dominic Avatar answered Sep 25 '22 02:09

Anto Dominic