custom js in rails project

rubyonrails-talk
1

Hello, I have a rails project with one controller and one action, as simple as posible. And I'm trying to put some custom css and js to my own index.html.erb (not public/index.html.erb), I inluded this on the layout file:

layout file:

<!DOCTYPE html> <html> <head>   <title>Volei</title>   <%= stylesheet_link_tag "application", :media => "all" %>   <%= javascript_include_tag 'foundation.min.js' %>   <%= javascript_include_tag 'app.js' %>   <%= javascript_include_tag 'jquery.foundation.navigation.js' %>   <%= javascript_include_tag 'modernizr.foundation.js' %>   <%= javascript_include_tag 'mijs.js' %>   <%= csrf_meta_tags %>

</head> <body>

<%= yield %>

</body> </html>

My scripts are in assets/javascripts. And the css works fine, but the js not.

I google how to add js and css in rails, and I think I am doing it right.. any advice please??

thanks in advance!

2

To make it simplier include just application: javascript_include_tag 'application'

In application file should be writed something like: require self require_tree .

This will require all css files in the assets/javascript folder.

And once more - you have no need to write '.js' for file in Rails at all.

3

thanks for answer (so fast!)

now I have this in the layout file:

  <%= stylesheet_link_tag 'application', :media => "all" %>   <%= javascript_include_tag 'application', :media => "all" %>   <%= csrf_meta_tags %>

also tryied:

  <%= stylesheet_link_tag 'application', :media => "all" %>   <%= javascript_include_tag 'application' %>   <%= csrf_meta_tags %>

and in application file:

//= require jquery //= require jquery_ujs //= require_tree .

this time all is correct? :slight_smile:

I saw the source code of the generated page, and there are all the css and js, and something like the dropdown nav works, but the slide not...

thanks a lot!

4

I think you are saying that all the js is included in the page ok when you look at the html but the js is not working correctly. In which case you obviously have a problem with the js (not rails). First copy and paste the complete html of the page into the w3c html validator to check for any problems there and then try it with firebug in firefox and see if it throws up any errors.

Colin

5

yes! this is exactly what I mean. And I know this works because I made it in a static page with the css and js, all out of rails, before. I can't validate the code now, I will this night, but I don't think the code can be the problem as long as it works out of rails...

Thanks all to answer :slight_smile:

6

Once you get the js/css/html into the browser then it does not care whether it came from a static page or a rails app. If you are getting a different result in rails then the generated page must be different.

Colin

7

Try including js in order like you had before.

in your application.js

//= require jquery //= require jquery_ujs

//= require ‘foundation.min’ //= require ‘app’

//= require ‘jquery.foundation.navigation’

//= require ‘modernizr.foundation’

//= require ‘mijs’

8

hi! since the css and js is the zurb foundation, I realize I can install the gem, and I follow the how to in the home page at git-hub (https://github.com/zurb/foundation-rails), and I get stuck in "Using foundation in production", I cant use capistrano because I don't know where is the capfile.. so after install it, I create the capfile and then add the 2 lines the tutorial say me, and then run the "cap deploy" command, and this I get:

$ cap deploy

  * executing `deploy'   * executing `deploy:update' ** transaction: start   * executing `deploy:update_code' Please specify the repository that houses your application's code, set :repository, 'foo' *** [deploy:update_code] rolling back Please specify the name of your application, set :application, 'foo' ** [deploy:update_code] exception while rolling back: SystemExit, Please specify the name of your application, set :application, 'foo'

And I don't undesrtand this... I am doing anything wrong?

Then in the capistrano webpage I didn't found any help...

Then I tryied "To compile on-the-fly" (in the git-hub page), and when I go to my page it doesn't work and looks like since I install foundation gem, with this message:

Sprockets::FileNotFound in Static_pages#index

Showing /home/usuario/ruby/proyectosRoR/volei_2/app/views/layouts/application.html.erb where line #10 raised:

couldn't find file 'foundation'   (in /home/usuario/ruby/proyectosRoR/volei_2/app/assets/stylesheets/application.css:12)

Extracted source (around line #10):

7: 8: <head> 9: <title>Volei2</title> 10: <%= stylesheet_link_tag "application", :media => "all" %> 11: <%= javascript_include_tag "application" %> 12: <%= csrf_meta_tags %> 13: </head>

Rails.root: /home/usuario/ruby/proyectosRoR/volei_2 Application Trace | Framework Trace | Full Trace

app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb___140248591_80812530'

Request

Parameters:

None

Show session dump

Show env dump Response

Headers:

None

buuuut in the sprockets there are all ok I think:

app/assets/stylesheets/application.css

*= require "foundation" *= require_self *= require foundation_and_overrides *= require_tree .

and app/assets/javascripts/application.js

//= require "foundation" //= require jquery //= require jquery_ujs //= require foundation //= require_tree .

I am having a headache with only try to put some css and js in my static page.. please, what am I doing wrong??

thanks in advance!