I am trying to install a plugin called Chaffel.js, I have added it to my javascript file
+app
|+assets
||+javacripts
|||chaffle.min.js
|||
I have required it in application.js
//= require chaffle.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
And I have also added this to config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(chaffle.min.js)
And I have included it in my view
<%= javascript_include_tag 'chaffel.min' %>
And have added all the html / javascript it showed for the example but when I load up the view it gives me this error
Sprockets::Rails::Helper::AssetNotFound in Home#index
The asset "chaffel.min.js" is not present in the asset pipeline.
I don't know if it is a problem with my asset pipeline or if the plugin just doesn't work anymore (As the cdn src on its page doesn't seem to work either) Would love some help with this or recommendations for a different plugin/way to achieve the same effect (a text shuffle animation).
I was able to get it working in a normal html file by just directly including the file via
<script src="chaffle.min.js" charset="utf-8"></script>
So it is definitely a problem with my code / the asset pipeline and not the plugin.
First of all, if you have //= require_tree . in your application.js you don't need to change any other files. //= require_tree . will include all files in the javascript directory for you:
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
But the problem you have faced, I guess is a just a typo: chaffle / chaffel. But again, just clear all mentions of it and leave only require_tree – that should be enough.
Related
Currently, my application.js file includes:
//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require ckeditor/init
//= require_tree .
The problem is ckeditor is being loaded on every page when I only need it on one admin like view Articles#New.
What is the correct way in Rails 4.2, to make ckeditor's JS only load on the Articles#New view?
Please follow some steps
Remove from application.js //= require ckeditor/init
at page articles/new.html.erb add following line
javascript_include_tag "ckeditor/init"
in config/initializers/assets.rb add following lines
Rails.application.config.assets.precompile += %w( ckeditor/* )
I think #Vijay's answer is exactly the right one.
The config.js not found problem is another problem. The url is probably hard coded in the init.js, because "ckeditor/config.js" seems not like normal precompiled filename which usually looks like config-7efjsdhfduey44xxxxxx.js.
The assets/ dir only has precompiled files in production so the config.js is not found.
You can:
change init.js to init.js.erb
change every path it uses in the file to "asset_path", ex:
'config.js to <%= asset_path 'ckeditor/config.js' %>
do 1,2 for every file under ckeditor/
When using Sprocket in production, the right filename is important.
or you can just include the ckeditor from CDN and forget all about this j/k
I have to modify a RoR project. All the javascripts are in the public/assets folder and my work is to move them in the app/assets/javascripts folder.
But when I try to import my javascript in my view with that : <%= javascript_include_tag "application"%> the result in code is the folowing :
<script src="/javascripts/application.js">
{"status":"ERROR","message":"404 not found"}
</script>
Currently here is what I've got in my folder
I haven't modify the application.js. The file contain these lines :
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I also modify my config/application.rb to add this line :
require 'sprockets/railtie'
I don't know why I have a 404 not found. In all the tutorials that I read it looks like that all I have to do is to put my JS in app/assets/javascripts and use javascript_include_tag to access it. But I suppose that some configurations lines are missing but I can't figure out which.
Thanks for the help
I'm using RoR and jquery.ui.addresspicker.js
This jquery.ui.addresspicker.js requires that google is loaded before that library is loaded. I only need the addresspicker on a couple of pages in the application.
The google part that needs to be loaded before is this:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
But this makes the page load slower so I don't want this on all my pages.
The application.js contains this:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery.blockUI
//= require select2
//= require cocoon
//= require_tree .
Currently the jquery.ui.addresspicker.js file is in app/assets/javascripts and thus also loaded automatically all the time.
How can I handle this? Should I move the addresspicker.js out of the javascripts directory? Should I rewrite my application.js? Other suggestions?
You can replace
//= require_tree .
with an explicit list of the javascripts that you want included on each page. and just include jquery.ui.addresspicker on the pages that you need it.
I used Ian's idea to change the application.js
I created a new folder named sitewide and copied all the javascripts in there that I want to use on the whole site (so not the addresspicker).
I changed application.js like this:
//= require_tree ./sitewide
And in the page where I needed the addresspicker I put it using javascript_include_tag
This way I don't need to change the application.js file everytime I want to add a js file.
use a different layout on both pages or just remove the jquery.ui.addresspicker.js from the default_layout and just include in the pages where you need it
<%= include_javascripts "jquery.ui.addresspicker" %> or
javascript_include_tag "jquery.ui.addresspicker"
in the page where you need
I have a Rails application, and I'm using Ember on the front-end. I'd like to move the ember-related files down one level in the directory structure, but when I do, the templates no longer render.
In the plain, vanilla, working version of the application, my directory structure is:
./app/
assets/
javascripts
application.js
ember-app.js
routes.js
store.js
models/
controllers/
routes/
templates/
views/
with: application.js
//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ember-app
App = Ember.Application.create();
and: ember-app.js
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./templates
//= require ./router
//= require_tree ./routes
Everything works fine. However, I would like to move the ember-app file and all ember javascript code down one level, and when I do so, the templates do not render. (Part of the application uses Ember, but not the entire application, and I'm trying to set up two separate paths through the asset pipeline.)
The desired structure is:
./app/
assets/
javascripts
application.js
embro/
ember-app.js
routes.js
store.js
models/
controllers/
routes/
templates/
views/
with: application.js (revised: 'require ember-app' becomes 'require embro/ember-app')
//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require embro/ember-app
App = Ember.Application.create();
(ember-app.js is unrevised.)
As I said, after the move, none of the template content appears onscreen. No errors onscreen or in the console, just an empty ember-application.
When I examine Ember.TEMPLATES in the console, all the expected templates are listed. Furthermore, if I put the desired content in x-handlebars templates in the appropriate rails view, the content successfully renders, just as it did with the original directory structure.
For example, in apps/views/welcome/index.html....
<script type="text/x-handlebars" data-template-name="application">
<h1>hello</h1>
{{ outlet }}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>this is the index</h1>
</script>
... and we're good to go again.
but if I leave the rails view empty, as I did with the original structure, it's a no go.
Wondering if perhaps the ember-rails gem requires the handlebars templates to be present in app/assets/javascripts/templates, and if there's a way to override this. The documentation mentions adding a templates_root option to the application configuration block, and I'm wondering if this is the key. I've played around a bit, no luck yet.
Any ideas?
UPDATE:
Afraid I'm not having any luck with the templates_root option. As an experiment, I tried building a new, simple rails app, and using the ember-rails bootstrap generator to get it up and running. All's well, but if I then attempt to simply change the name of the templates folder (i.e. app/assets/javascripts/templates -> app/assets/javascripts/temple), with appropriate changes to the sprockets includes and config files, I'm getting the same results.
Any chance the templates_root option is somehow broken?
I'm using Ruby 1.9.3, Rails 3.2.11, ember-rails 0.10.0
Any pointers to where I should look in the ember / ember-rails / handlebars source code? Have started poking around.
thanks!
You're right that you need to set templates_root. Try adding
config.handlebars.templates_root = 'embro/templates'
to the configuration block in application.rb, or
RailsApp::Application.config.handlebars.templates_root = 'embro/templates/'
to a new initializer, where RailsApp is whatever your application is named.
Edit:
I was able to reproduce the behaviour that you described with templates_root. The fix for me was to delete the /tmp folder of my application and restart rails. After that, the templates were named correctly.
Edit:
More precisely, you need to clear the sprockets cache at /tmp/cache/assets after changing templates_root.
Edit:
As mentioned in the comments below, a simple rake tmp:cache:clear should take care of the problem.
For site wide specific JS code (i.e. for the header, which appears on all pages). Where should this be placed? In:
app/assets/javascripts/application.js
Is that right?
For pages#home. Which root_url also points to (root :to => 'pages#home'). Where should my JS file be placed in the pipeline?
app/assets/javascripts/pages/home.js
And regards to my application.js. Is this right? It currently looks like:
//= require jquery
//= require jquery_ujs
//= require_directory .
Or should I just embed page specific JS in the view?
It's not a good idea to put js code in application.js. You can put that code in any other file on the assets/javascripts folder and it will be included automatically by the require_directory or require_tree command. Your application.js file is perfectly fine as it is right now, but you might want to use require_tree instead of require_directory for recursive inclusion.
For example, the javascripts files in app/assets/javascripts/pages will be included by require_tree but not by require_directory.
Recommended reading: Asset pipeline guide