Custom js in rails project

Rails
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:

Volei <%= 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 %>

<%= yield %>

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

On 30.08.2012 00:44, Axel A. wrote:

Volei

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

thanks in advance!

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

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:

5

On 30 August 2012 08:53, Axel A. [email protected] wrote:

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…

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

6

On 29 August 2012 22:11, Axel A. [email protected] wrote:

<%= stylesheet_link_tag ‘application’, :media => “all” %>

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…

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

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
(GitHub - foundation/foundation-rails: Foundation for 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:

Sass::SyntaxError in Static_pages#index

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

File to import not found or unreadable: foundation/common/ratios.
Load path:
Sass::Rails::Importer(/home/usuario/ruby/proyectosRoR/volei_2/app/assets/stylesheets/foundation_and_overrides.scss)
(in
/home/usuario/ruby/proyectosRoR/volei_2/app/assets/stylesheets/foundation_and_overrides.scss)

Extracted source (around line #10):

7:
8:
9: Volei2
10: <%= stylesheet_link_tag “application”, :media => “all” %>
11: <%= javascript_include_tag “application” %>
12: <%= csrf_meta_tags %>
13:

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

app/assets/stylesheets/foundation_and_overrides.scss:1
app/views/layouts/application.html.erb:10:in
`_app_views_layouts_application_html_erb__34184581_77790540’

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_self
*= require foundation_and_overrides
*= require_tree .

and app/assets/javascripts/application.js

//= 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!