Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

ruby-on-rails

ruby-on-rails-4

turbolinks

ujs

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
Sign in to Comment

Related questions

Rails development environment Resque.enqueue does not create jobs
passing ruby variables to javascript (Ruby on Rails)
rails install - ERROR ... executing gem ... (OpenSSL::SSL::SSLError) SSL_connect ... read server hello A: wrong version number
How do I get a custom Rake task to run in Sinatra?
Every link_to on my rails 4 application is being called twice
Ruby short hand for simple if else condition
Rails: How to get the name of the previous action in controller
Ruby on Rails - Is params a method or a hash?
Codeship - Bundle install error (You must use bundler 2 or greater with this lockfile)
How do you talk SQL directly to MySQL from Ruby?
How to remove a URL's trailing slash in a Rails app? (in a SEO view)
Updated (current) recommendation on Rails versus Django? [closed]
Rails lib includes
Slim template engine syntax for [if lt IE 9
rvm ruby 1.9.2 and Rails 3.1 can't start server
Rails rspec undefined local variable or method `render_views'
How to split text in Ruby without creating empty strings?
Invalid redirect_uri with 'omniauth-facebook' gem
ActiveRecord::StatementInvalid: Could not find table 'users'
How to specify a multiple column index correctly in Rails

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!