Rails link_to method with turbolinks disables formatting - ruby-on-rails

I am formatting videos with video_js gem. For example here how I print my videos:
.row
- #streams.each do |stream|
= videojs_rails sources: { mp4: stream.video}, setup: "{}", controls: true, width:"400", class: "col-md-10 col-md-offset-1"
Everything works fine as expected if I go to that page with a link. If I create button with link_to to that page, formatting gets disabled. I need to refresh page to make it look as expected. What's wrong with that? Any ideas?

Remove turbolinks gem from your Gemfile
Run bundle install
In app/views/layouts/application.html.haml set turbolinks to false like that:
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false
= javascript_include_tag 'application', 'data-turbolinks-track' => false
or remove them.
Restart server

Related

rails 4.2.8 - stylesheet_link_tag throws ActionView::Template::Error: no implicit conversion of nil into String

I'm trying to update a rails app which runs totally fine if I use rails 4.2.4 (the version it's been developed on) upto rails 4.2.7
As soon as I switch to rails 4.2.8 or later (tested all versions upto 4.2.11) I get
Failure/Error: = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
ActionView::Template::Error:
no implicit conversion of nil into String
# ..../actionview-4.2.11/lib/action_view/helpers/asset_url_helper.rb:140:in `join'
# ..../actionview-4.2.11/lib/action_view/helpers/asset_url_helper.rb:140:in `asset_path'
Having a loot at the actionview-4.2.11/lib/action_view/helpers/asset_url_helper, I can see that the error happens in
File.join(relative_url_root, source)
where
pry(#<#<Class:0x00000009a9aa98>>)> source
=> "/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css"
pry(#<#<Class:0x00000009a9aa98>>)> relative_url_root
=> {}
As soon as I remove all stylesheet_link_tags and javascript_include_tags, the error does not show up anymore (but of course all my styles and javascripts are gone).
Here's the relevant part of my app/views/layouts/application.html.haml
!!!
%html
%head
%meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"}
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
%title BrotUndButter
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
Any ideas?
Never mind.
This was a very special problem of this very app.
I have been setting a up a custom configuration option in an initializer with
Rails.application.config.x.brotundbutter = Rails::Application::Configuration::Custom.new
and this caused the error. Don't ask me how I found this, it was a pain in the ass.

Rails - Flash of Unstyled Content (FOUC)

I get a flash of my top navbar at the side of the page, in between pages. Being a new programmer, I was looking for a simple solution, and tried inserting the solution from How do I eliminate FOUC with Ruby on Rails? into my app/views/layouts/application.html.haml file, so now the header portion of that file looks like:
!!! 5
%html
%head
%title Title
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%link{:rel => "stylesheet", :href => "//opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css"}/
= csrf_meta_tags
:css
.fouc { display:none; }
:javascript
try {
var html=document.getElementByName("html");
document.addEventListener("DOMContentLoaded", function(event) { html.class=""; });
html.class="fouc";
} catch() {}
But this did not fix the problem. Can anyone put me onto the right track? (In my research, it seemed other solutions were criticized for not working in all circumstances.) This really destroys an otherwise great project - I hope someone can help!
Edit: FOUC is happening on Chrome but not on MS-Edge.

Rails Fails To Generate Correct Link Path In Production Mode

The app whose in production mode is failed to generate correct links.
For instance, the code below
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
is generating the code below:
<link rel="stylesheet" media="all" href="/stylesheets/application.css" data-turbolinks-track="true" />
<script src="/javascripts/application.js" data-turbolinks-track="true"></script>
I precompiled javascript and stylesheet. Their correct path is respectively /public/assets/application-0d1386df5e82480bb54a6cd082e626ed2d46d364e867ca7d9ce009d3af8c1718.js and /public/assets/application-5d8165dcf2b8902df77aed37c7ab6fee8c7d62844cb48ece6360d1fa4f079804.css.
Also, I did change config.assets.compile = true in /config/environments/production.rb. But nothing is changed.
If you want to run production mode in your local environment you should tell rails to serve assets itself by changing following
config.serve_static_files = true
In production environment itself you have to configure it using nginx - http://vladigleba.com/blog/2014/03/27/deploying-rails-apps-part-4-configuring-nginx/
and make sure you have reverse your earlier change before pushing it to production.
config.serve_static_files = false

Rails 4 is adding controller name to the asset url which causes 404 error

I am wondering why Rails 4 is adding the controller name to the asset request when I click on a controller specific page. For example, instead of this url (which is accurate): /assets/jqBootstrapValidation.js
It's generating this url (causing a 404 error): /controllername/assets/jqBootstrapValidation.js
It's happening for all js and css files I have manually added to the app/assets directories. Seems like the asset request is getting confused and adding the current directory name to the request but I don't know how to fix it (the assets are in the correct directory).
How do I remove the controller name from the asset request? Any advice would be appreciated.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Rails3.How do I see the errors when I use Compass?

Rails 3. I installed compass and I started to modify application.html.haml to convert it from erb to haml.
So far, it does not work. When I refresh the page the layout do not get rendered. It just render the contents of the controllers' view (which is erb).
It is the first time I use Compass, so probably the code is wrong. My question is, where do I see the errors, warning, etc?
I use Passenger.
Edit:
The code is
!!! 5
%html
%head
= stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection'
= stylesheet_link_tag 'compiled/print.css', :media => 'print'
/[if IE]
= stylesheet_link_tag 'compiled/ie.css', :media => 'screen, projection'
%title
DaVinci - = yield(:title) || " Inicio"
= stylesheet_link_tag 'compiled/modern'
= javascript_include_tag :defaults
= csrf_meta_tag
%body
#header
.navlist
%ul
%li
= link_to 'Inicio', root_path
%li
= link_to 'Administrar', configuration_index_path
%li
= link_to 'Tareas', tasks_path
%li
= link_to 'Documentos', files_path
%li
= link_to 'Correo', emails_path
= yield(:nav)
#contents
= yield
Can I use Tabs instead of spaces?
Compass errors usually show up when you load the page. If the page loads fine, a second option is to view the HTML source of the page, click on the stylesheet loaded into the page, and see if an error is printed into the stylesheet itself. Finally, you can also precompile your sass sheets by running the command
compass watch .
in your root directory. Compilation errors will be written as the output of this command

Resources