I am running Rails 4.0.1 and Ruby 2.0.0. I currently have a graph.js that takes inputs in from the user for a savings calculator in order to create a graph with d3 and the rickshaw.js graph.
My graph.js file is saved in the app/assets/javascripts/graph.js. I make a call to the Rickshaw graph with
var graph = new Rickshaw.Graph()
I am getting an error of Uncaught ReferenceError: Rickshaw is not defined.
The rickshaw.js file is saved in vendor/javascript/rickshaw.js along with d3.layout.js and d3.vs.js. If I save all of these files in the app/assets/javascripts everything works fine, but that does not seem to be the correct rails way.
Does anyone know how to fix this error?
Thank you.
To use the asset pipeline, you'll want just the filename in the require statements:
// Vendor Files
//= require d3.v3
//= require d3.layout
//= require rickshaw
See the asset pipeline docs for more info on asset organization.
Related
I upgraded Rails 4.2.10 application to Rails 5. Solved errors with bundling and some deprecations. I am able to start the Rails Application, but when I try to load the Application, it fails with error, Invalid CSS after "#": expected id name, was "= require in the css file
I tried using #import, but it fails for external files in vendor/assets. Nevertheless, I want to understand why it isnt working anymore. In my config, I have the file in config.assets.precompile +=
In my index.html.erb,
<%= stylesheet_link_tag 'users' %>
In users.scss,
#= require "dashboard/dx"
Note: I am using sass-rails in my Gemfile
The error that I get,
Sass::SyntaxError in Dashboard::Users#index
Invalid CSS after "#": expected id name, was "= require "dash..."
Extracted source (around line #1):
#= require "dashboard/dx"
Hey I think the error is throwing because in your typical .scss file you would have to use either an #import "dashboard/dx" and#= requiremight only work in.css`
The problem with this line
#= require "dashboard/dx"
This syntax is not working with .scss file. Either You have to write like this
#import 'dashboard/dx'
Or rename the file with .css extension.
Note: You can also try to rename with .css.scss extension May be it works also sometimes.
I have difficulties integrating select2-rails with ActiveAdmin. I followed setup steps on
Select2-rails Github page: https://github.com/argerim/select2-rails and I added line:
//= require select2
to app/assets/javascripts/application.js and line:
*= require select2
to app/assets/stylesheets/application.css
so I assume when I have page in ActiveAdmin I should be able to add line:
$('#add_student_select').select2()
to active_admin.js.coffee
But its not working. In console I can see following error:
Uncaught TypeError: undefined is not a function
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
completed
I also followed this StackOverflow question which recommends to add this line to active_admin.css.scss:
body.active_admin {
#import "select2";
}
But then I get following error:
File to import not found or unreadable: select2.
Do I integrate it correctly? I don't think that ActiveAdmin is able to get even access to the librabry.
If you're adding Select2 to the ActiveAdmin interface, you must add the javascript and styles to the ActiveAdmin assets:
# app/assets/javascripts/active_admin.js.coffee
#
#= require select2
#
# ...
And the stylesheets:
// app/assets/stylesheets/active_admin.css.scss
//
//= require select2
//
// ...
In the example you provided, Select2 would be available to the main Rails application, but not ActiveAdmin. ActiveAdmin uses its own javascript and stylesheet files.
I had met the same issue making select2 work with activeadmin, but instead I used a gem named activeadmin-select2. I had installed it according to the README, but I still got error "File to import not found or unreadable: select2.". It seems like that select2-rails had not been installed or not be accessible, however. So then I tried to add select2-rails to my Gemfile, and bundle, lastly, everything went well. You should checked your gem loading before you can make it work.
I'm building a custom action for rails admin that includes a custom view.
I want to include a local copy of sparkline.js but I can't figure out a way to do this.
I tried to add the sparkline.js to the /vendor/assets/javascripts/actions/action_name directory but it is not loaded by rails admin
Is there any other way to get this file loaded
I did this by putting the external library into the app/assets/javascripts/rails_admin/custom directory and adding a 'require' statement to the rails_admin ui.js file.
i.e.
// in app/assets/javascripts/rails_admin/custom/ui.js
//= require ./sparkline.js
You can do this with coffeescript too:
# in app/assets/javascripts/rails_admin/custom/ui.js.coffee
#= require ./sparkline.js
I'm using Rails 3.2.8. When the app is deployed access the view that is including a javascript:
<%= javascript_include_tag "epiceditor" %>
Heroku fails with this log:
ActionView::Template::Error (/app/app/assets/javascripts/epiceditor.js.erb has already been required
I've checked some possible solutions, like checking for any reference that may trigger a circular dependency, or simply removing it in case it is being included somewhere else, which isn't. So, if I include it, I get this "has already been included error", if I don't , then the file isn't included at all.
My config/application.rg has this
config.assets.initialize_on_precompile = false
And applications.js has this:
//= require jquery
//= require jquery_ujs
//= require tabs
It might be important to note that the file the tag is referencing is "epiceditor.js.erb", since it has some embedded Rails code that I needed.
Thanks for your help
EDIT:
I believe this is a bug in Sprockets. If I update Rails to 3.2.9rc2, the error is now this:
ActionView::Template::Error (Asset logical path has no extension: epiceditor/.js
but of course the extension in epiceditor is epiceditor.js.erb, and I've tried being explicit about it in the javascript_include_tag as well.
I found the bug.
It turns out that inside the .js.erb file I'm calling
<% asset_path 'epiceditor/' %>
which should expand to the path where all the epiceditor file are placed, but instead is actually loading the file itself in recursive manner. This is expanding properly in the development environment but not in the production environment. Funny, right?
The reason for this is that is adding a digest. So I fixed the whole issue with this:
<%= asset_path 'epiceditor/', :digest => false %>
and now it does expand to the directory, and doesn't fall into the recursion trap.
Hope this saves some time for someone!
TLDR:
What can you do to combine multiple CoffeeScript files into one JS file, in RoR, all under the same anonymous function block?
Long version:
I have a few CS files that will be loaded for part of a RoR web app. I'm wondering: what is a good way to separate concerns with CoffeeScripts and Ruby on Rail 3.1's asset pipeline?
Let's use the following as example code:
main.js.coffee
window.MyApp = {} # to escape the CoffeeScript anonymous function block
# (I like the anonymous function block because it protects my other
MY_GLOBAL_SETTING = "world!"
$.click "#my_button" myApp.sayHello
# (I could use something like goog.bind here instead of using myApp. Any suggestions? Fat arrow?)
hello.js.coffee
MyApp.sayHello = sayHello () ->
doComplicatedStuff()
alert("Hello #{ MY_GLOBAL_SETTING }")
complicated.js.coffee
doComplicatedStuff = () ->
# some really complicated algorithm, for example
true
I have my assets directory structured like the following:
assets/
application.js
application/
# javascript that gets used with the main application
secondary_page.js
secondary_page/
complicated.js.coffee
hello.js.coffee
main.js.coffee
secondary.js
//= require secondary_page/main.js.coffee
//= require secondary_page/complicated.js.coffee
//= require secondary_page/hello.js.coffee
I used to compile the files together with CoffeeScript as part of the build process, but now I want to use the asset pipeline instead. I'm drinking the RoR 3.1 kool-aid! Haha, seriously though, the asset pipeline looks awesome.
The problem I'm experiencing is that secondary.js looks like the following:
(function() {
// main.js
).call(this);
(function() {
// complicated.js
).call(this);
(function() {
// hello.js
).call(this);
This prevents local variables from being shared amongst the entire code. MY_GLOBAL_SETTING and doComplicatedStuff aren't available to sayHello.
So... what should I do? I can't think of a good way without introducing my own custom compilation step again.
This is a common question for Rails developers starting to use CoffeeScript. See, for example:
"Can't find variable" error with Rails 3.1 and Coffeescript
Functions in controller.js.coffee
How can I use option "--bare" in Rails 3.1 for CoffeeScript?
Solutions abound. The simplest is to preface variable declarations that you want to be visible outside of a particular file with #, since the this will point to window in the outermost context of each file, and x points to window.x when no local x is defined.
Probably the best way to do this is to leave them in their own anonymous scopes but export the individual functions you need access to from other modules. From Trevor Burnham's Coffeescript book, he recommends you do this (which works in node and browsers):
root = global ? window
root.exportableFunction = exportableFunction
root.MY_GLOBAL_SETTING = some: 'Setting'