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.
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
I'm porting my symfony app to Ruby on Rails 4.2.0. My setup works fine in symfony. There is this old post on how to use dojo with RoR, but it uses deprecated code.
In my application.html.erb I have
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
I replaced the symfony wrappers with Rails ones. I also changed the dojo version. I was using 1.9.1. Rails generates this html:
<script>
dojoConfig = {async: true}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js">
The last line is followed by a bunch of compressed javascript and the close script tag in Firebug.
I didn't make any changes in my home/index.html.erb where I'm testing this code. In app/assets/javaascipts/home.js, I have:
//require(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
define(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
{
ready(function()
{
var head = "<div class='footnote-text'>";
var tail = "</div>";
var fnt1 = head + dom.byId("fnb1").innerHTML + tail;
var fnt2 = head + dom.byId("fnb2").innerHTML + tail;
var fnt4 = head + dom.byId("fnb4").innerHTML + tail;
new Tooltip({ connectId: ["footnote1"],position:["after","above","below"],label: fnt1 });
new Tooltip({ connectId: ["footnote2"],position:["after","above","below"],label: fnt2 });
new Tooltip({ connectId: ["footnote4"],position:["after","above","below"],label: fnt4 });
new Tooltip({ connectId: ["footnote5"],position:["after","above","below"],label: fnt4 });
});
});
//require(["dojo/dom", "dojo/ready", "dijit/Dialog"], function(dom, ready, Dialog){
define(["dojo/dom", "dojo/ready", "dijit/Dialog"], function(dom, ready, Dialog){
ready(function(){
var fnt3 = dom.byId("fnb3").innerHTML;
myDialog = new Dialog({
title: "Contact Me",
content: fnt3,
style: "width: 300px"
});
});
});
The commented out require lines are what I use in my symfony app. As you can see, I replaced them with define as described on the dojo site. When I run it, I get the following error on the Firebug console:
ReferenceError: define is not defined
...define(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip
If I used require instead of define, I get require is not defined.
Update
I tried installing dojo into the app and made some progress. I copied the download from dojo to vendor/assets/javascript/dojo. The dojo directory contains the subdirectories dojo, dojox, and digit
I then added
//= require dojo/dojo/dojo.js
to app/assets/javascript/application.js. I also changed the define back to require in the home.js file. When I reloaded the page, I got an error complaining that it couldn't find Tooltip. I then added:
//= require dojo/dijit/Tooltip.js
On reload it complained about a bunch of other missing js files. This is the same problem I had using symfony, which is why I went to the google image. How can I get to rails to search for the files in the vendor directories? This is one of the errors:
"NetworkError: 404 Not Found - http://amcolan.loc/dijit/_base/manager.js"
Update 2
Since require_tree worked for app assets, I thought it might work to vendor as well. I added
//= require_tree ../../../vendor/assets/javascripts/dojo
to my application.js file. When I reloaded the page, it took about a minute. My guess is that it's loading everything in the dojo directory tree, which is not surprising. The page load completed without any errors. When I hovered over a tooltip item (the purpose of the code is to show tooltips), Firebug cranked out about two thousand errors and quit. All the errors appear to be "ReferenceError: define is not defined"
Update 3
I went back to using the googleapi. My application.html.erb header looks like this
<head>
<meta charset="UTF-8">
<title><%= content_for?(:title) ? yield(:title) : "American Colonial Ancestors" %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
I reversed the order of the javascript includes. The page reloaded without errors. The tooltip doesn't work, but it doesn't generate any errors when I hover over an item. I put a bad statement in the home.js code and it came up on the console so I know the code is being parsed. I may just have a bug in my page setup.
There may be more than one way to get Dojo toolkit to work with Ruby on Rails. This is the easiest if not the most efficient way. This works in Rails 4.2.0. I would imagine it would work in other versions as well.
In views/layouts/application.html.erb add the following prior to the inclusion of the site scripts:
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
Change the version to the latest or to which ever one you want to use. Here I'm using version 1.10.3. The dojo site says there are other CDN's (Content Delivery Network) for the source code. I'm using google as it was in their example. Here are the pertinent parts of my head section:
<head>
<meta charset="UTF-8">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" %>
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= content_for :page_script %>
<%= csrf_meta_tags %>
</head>
If you are going to use any of the toolkit's dialog boxes, tooltips, etc, you will need to include a stytlesheet by adding something like this:
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" %>
Change the version and the theme to your own requirements. Here I'm using the claro theme. You can see it in my head section above. I don't think placement is critical. You also need to declare your theme class in the body statement. Here's mine:
<body class="claro">
An older post on the subject had different javascript formatting. I don't think anything special is needed. Here's an example of a working script:
require(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
{
ready(function()
{
var head = "<div class='footnote-text'>";
var tail = "</div>";
var fnt1 = head + dom.byId("fnb1").innerHTML + tail;
var fnt2 = head + dom.byId("fnb2").innerHTML + tail;
new Tooltip({connectId: ["footnote1"], position:["after","above","below"], label: fnt1 });
new Tooltip({connectId: ["footnote2"], position:["after","above","below"], label: fnt2 });
});
});
As mentioned in my question, I tried placing the Dojo Toolkit source in vendor/assets/javascript. Starting with with version 1.7, dojo started using Asynchronous Module Definition (AMD). It may be the case that the AMD loader is incompatible with the Rails pre-compile feature. I don't know enough about it to say for sure.
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 %>
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