I have a very simple link on my page. My link. 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.
The above solution didn't work for me but this did :
My link
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
Use data-no-turbolink attribute on that link the error should be gone
<a href="#" data-no-turbolink>My link</a>
With Rails 7 / Hotwire, you now need to use:
data-turbo="false"
Related
In my application on change of every route the whole page getting reload like when we do page refresh. That should not happen on changing of routes. I worked on Angular2, 4 5 and 6. I didn't face this issue before.
I got the same issue when I started work with Angular. It might be possible in your HTML page
Home //Don't use this one
Instead of you use
<a class="" routerLink="/homePage" skipLocationChange>Home</a>
I am implementing, http://www.sitepoint.com/infinite-scrolling-rails-basics/, into my own project.
It works when I type URL directly to browser after I have implemented it in my own project. However, it does not work if I link_to from a different page. It goes back to regular will_paginate, then I hit "reload" button on browser, it starts tp work again.
However, I don't want my users to hit "reload" button every time for making infinite scrolling to work. What might cause this and how can I fix it? Thanks a lot!
It is caused by turbolinks
However, it is not a fix by installing jquery-turbolinks.
After reading turbolinks documents, temporarily disable turbolink for that particular link with
Home (via Turbolinks)
<div id="some-div" data-no-turbolink>
Home (without Turbolinks)
</div>
Have been bashing my head against the wall for a good day and a half now. Did everyone abandon old fashioned page structures to go to jQuery Mobile?
I have a webpage, tracks legislation. Main navbar goes as such:
/bills/list, /legislators/list, /committees/list
Where each link is rewritten into
index.php?category=$1&detail=$2
so /bills/list translates to
index.php?category=bills&detail=list
But when I load a page from the navbar, using an a href tag, the pages load all nice and easy using the AJAX loader, but the newly loaded pages 1. don't run scripts, and 2. don't display any formatting. This is a problem.
All the suggestions I have seen say to .bind something or .refresh or .trigger without any context of where that goes, and everything I have tried in that vein has frustrated me to no end.
Please help! And by the way, if I just data-ajax=false everything it works perfectly. But I want the quick loading that ajax gives! I just don't understand how it works and there are really no good pointers on the web I could find.
Code in this pastebin: http://pastebin.com/9jMxV0B6
You can see some artifacts of my struggling to get the thing working.
From what I gather, you shouldn't call new pages via a href, but then why the hell does jqm use href's for its nav menu? Is that supposed to call a function or something?
"But when I load a page from the navbar, using a basic old fashioned a href tag, the pages load all nice and easy using the AJAX loader, but the newly loaded pages 1. don't run scripts, and 2. don't display any formatting. This is a problem."
That happens because JQM ignores all the headers in all other pages besides the first page that loads. So if you want to do any changes to the page use page events, place them In first page.
I had problems understanding it also. Here is a link to my previous post that explains it a bit: How do I enable onload in jQuery mobile (open page both from link & load)?
Hope it clears some things for you. My recommendation for you is to do two simple pages and test simple URL functionality.
If I have an application that uses PJAX or Turbolinks then I am seeing a problem when new code is deployed to the server - say Heroku. The issue is that users who are accessing the application will continue to use the Javascript from the previous version of the application (since it is already loaded into the browser), but will get the HTML pages from the new version. Sometimes the new HTML code assumes the new Javascript is loaded so things don't work properly.
Have others noticed this problem? What do you do about it? It seems like this would be a common problem for single-page Javascript applications (like those based on Backbone and Ember) too. Meteor at least seamlessly upgrades the code in the client, as a way to deal with this problem.
https://github.com/rails/turbolinks/#asset-change-detection looks like the answer. In your script tags, put data-turbolinks-track. Then I assume what happens is that when turbolinks loads a page, it looks for that script tag, and if the URL has changed (it will change automatically if you use the asset pipeline) then it reloads the whole page for you.
taking pivotaltracker as an example, they check for the client connection and force the user to reload their clients if a new version arrived.
as long as you don't provide backwards compatibility within your app, there is nothing else you can do.
If you're using Pjax, you can add
<meta http-equiv="x-pjax-version" content="v123">
to your header. You can use a server defined value for the content attribute, and then before you deploy, just make sure that value is updated. Once it's deployed, subsequent Pjax requests will see this header has been updated, cancel it's Ajax request, and pull down a full page reload.
For Turbolinks 5, you can add data-turbolinks-track="reload" to your script and stylesheet links in the header. Turbolinks will watch these files for changes on each request. Then upon deployment, just like Pjax, it will request a full page reload.
Classic Turbolinks just requires the attribute data-turbolinks-track instead.
You can read more and see other functions on Pjax's GitHub page: https://github.com/defunkt/jquery-pjax or Turbolinks: https://github.com/turbolinks/turbolinks.
For Turbolinks Classic: https://github.com/turbolinks/turbolinks-classic
I have 2 application layouts: application.html.haml and application.mobile.haml. But when I switch from mobile to the non-mobile version the mobile layout is still used for the first load. In Firebug console I see that the non-mobile view was properly returned, however the browser and the Firebug HTML tab show the mobile layout. Any idea what's going? It's fine after a refresh.
The issue turned out to be caused by JQuery Mobile.
I found the answer here: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
JQuery Mobile doesn't do full page reloads unless it's told to, so although the full html was returned, JQuery Mobile just replaced the page portion.
The key portion from the docs is:
"It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts."
Recently, I encountered a similar problem.
In my case, Rails4's turbolinks suffered. Similarly as JQuery Mobile, turbolinks only updates the body part of a full page without updating the head part of the html when an intra-site link is clicked. I simply removed the require line for turbolinks in my application.js and the problem disappeared.