Adding a javascript file to my assets - ruby-on-rails

I have a view with the following namespace
view/kids/registration/new.html.haml
Now I need to create a js file to this view, so I created a file in the following path:
assets/javascripts/kids/registration/new.js
Then I add the following lines to the application.js:
//= require ./kids/registrations/new
But it does not work. What I'm doing wrong. I'm checking the DOM (localhost:3000/kids/sign_up) but I never find line with this javascript file.
Thanks in advance for your help.
Adding the route
new_kid_registration GET /kids/sign_up(.:format) frontend/registrations#new
What I'm doing wrong.
Thanks.

Try //= require kids/registrations/new or //= require kids/registrations/new.js

I had faced similar problems while adding stylesheets to assets (Link to my question)
Here are few things you might wanna try:
As suggested by BOB add the require statements to application.js
I remember adding the list of files to application.rb as:
config.assets.precompile += ['jquery.colorbox.js','colorbox.css', 'reportng.css', 'reportng.js']
Your JS file can be placed anywhere in lib/assets/javascripts,
assets//assets/javascripts & vendor/assets/javascripts
Try using the
<%= javascript_include_tag "your_js_file_name" %> in your view file

Related

Unable to load asset application.js

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

How to include js and css files in rails - correct syntax

I'm trying to use Bootstrap Combobox for rails.
The instructions say that:
*"You will need two files included in your HTML in order for this to
work:
js/bootstrap-combobox.js
css/bootstrap-combobox.css*
I realise that they need to go in the application js and application css respectively, but I think that I'm getting the syntax wrong because I'm getting an error.
This is how I'm adding to application.css.scss:
* require css/bootstrap-combobox.css
This is how I'm adding to application.js:
//= require bootstrap-combobox
What error are you getting?
Without knowing the exact error, here's what I suggest:
After you make sure you have a file in your assets/stylesheets named bootstrap-combobox.css, you want your require statement to look like this:
*= require bootstrap-combobox
Your require statement looks fine for the JS assuming you have the file in the assets/javascripts folder.
You can also use //= require_tree . and *= require_tree . to require all files in your javascripts and/or stylesheets folders respectively instead as well.
Check out this section of the Rails asset pipeline for more info.

Add vendor/assets/javascripts to my valid assets route

I'm trying to make this work but it's driving me mad. I already set this in
application.rb
config.assets.paths << Rails.root.join("vendor", "assets", "javascripts").to_s
(.to_s because it returns an object while I want a string in here).
I cant find the solution and is driving me mad, because stylesheets directory in vendor works, but javascripts is not.
How can i do this?
Error returned:
<h1>Routing Error</h1>
<p><pre>No route matches [GET] "/assets/ext-all-debug.js"</pre></p>
I believe vendor is already included in your assets path, check using the rails console
rails console
Rails.application.config.assets.paths.each do |path|; puts path; end
However the easiest thing might be this
put ext at app/assets/javascripts/lib
require_tree will load it already or be explicit
application.js
//= require ./lib/ext-all-debug.js
If you really want it in vendor
create dir vendor/assets/javascripts/ext
create manifest file vendor/assets/javascripts/ext/index.js
put ext-all-debug.js into vendor/assets/javascripts/ext/
code for index.js
//= require ./ext-all-debug.js
code for application.js
//= require ext
that is the name of the dir that the index manifest file is located
Restart your rails server
if you don't want to load extjs via application.js, i.e. you want to include the extjs lib only on specific pages
<%= javascript_include_tag "ext" %>
You can add:
//= require_tree ../../../vendor/assets/javascripts
to your application.js file.
READ THE UPDATE
It looks like the problem is connected to the fact that EXT has it's own structure path build with relative paths.
I solved the problem by preserving the whole ext directory structure as is (without splitting images anywhere) and I added it to a vendor/externals directory (created by me). I then added the path with:
config.assets.paths << Rails.root.join("vendor", "assets", "externals").to_s
And now everything it's working fine by referencing it with //= require ext-all-debug.js
Update 23/12/2013:
As of Rails 3, notice that this directory has been added by default.
It's not easy to see the problem from the information you've provided as I think that the problem is elsewhere.
The purporse of asset pipeline is to to put all javascripts into one file. And that file is included to the HTML document. So the key is that one big JS file. Well, it can be more complicated but I think that's not necessarily your case.
So for example in your layout ERB (typically app/views/layout/application.erb):
<head>
...
<%= javascript_include_tag "application" %>
</head>
and in app/assets/javascripts/application.js:
//= require ext_all_debug
//= ...
When HTML page is requested, it asks for "application.js" and it is generated in a way that your vendor JS code is embedded into this file (notice that there is no path in that require).
And one last thing - it's quite important to test the behaviour in production environment because typically those generated JS files will be served by nginx/apache. rake assets:precompile is a good start.

Asset pipeline in rails3 - application.js not including other js files?

So my application.js file is including jquery accordingly, and everything I've put directly into it.
However, one of my controllers - lets call it Books - has its own books.js file
I want the books.js file only to be present when viewing pages within the books controller.
It doesn't seem to be including it at all though - any ideas?
First you should look at http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Second in app/assets/javascripts/application.js
does it contain something like
//= require_directory .
or
//= require_tree .
try:
<%= javascript_include_tag params[:controller] %>
"everything I've put directly into it." ...does that mean you put your own code into application.js? If so, you might want to read a tutorial on the asset pipeline.
But anyways, sounds like //= require_tree . is missing.

Where does application.js code go in rails 3.1?

Prior to rails 3.1, javascript code that was common to the application belonged in application.js by default, and was loaded by javascript_include_tag :defaults
With the asset pipeline in rails 3.1, the application.js file becomes a manifest file, and it appears that code I put in it is not included in the result. Where is this javascript code supposed to be moved to now? Obviously, I could create any other name and make sure that it is included by the manifest, but is there a default location already expected by idiom?
I encounter the same problem in rails 3.1 rc6. I use javascript_include_tag :application instead
Look closer:
the code in application.js is rendered, it's just at the end of the resulting js file.
Example, try:
//= require jquery
//= require jquery_ujs
//= require_tree .
alert('foo');
the alert dialog will appear in all pages.

Resources