Wiring HTML and JavaScript and CSS in a Rails Application

Question

So in the Assets folder there are two folders for javascripts and stylesheets. So I added a spike.js and a CSS file of spikecss.css to those folders and wrote some Javascript and CSS code fin them.

Now I am in the index.html page and writing something like this? Which doesn't work. How do I wire all these thing together to work?

This is a test app mostly for the javascript side of the deal so I really don't have models, controllers,views at this point. I am drawing D3 chart in the JavaScript file so I just want to show them when I hit the webpage

Javascript file:

var data = [4, 8, 15, 16, 23, 42];

var chart = d3.select("body").append("div")
    .attr("class", "chart");

chart.selectAll(chart)
    .data(data)
    .enter().append("div")
    .style("width", function(d){return d*5 +"px";});

Index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Here we go</title>
</head>
<body>

javascript_include_tag :defaults, "spike"

</body>
</html>

Which index.html file? The one in /public or /app/views/something/? You can't use embedded ruby in the /public/index.html... use <script> tags in the <head> section instead as you would for any static HTML page. — PinnyM
– PinnyM, Commented Apr 10, 2013 at 17:40
show your /assets/application.js, and /assets/application.css — Andrew Wei
– Andrew Wei, Commented Apr 10, 2013 at 17:58

PinnyM · Accepted Answer · 2013-04-17 15:56:24Z

UPDATE

Based on Ryan's method used in this railscast, you can have a dynamic index.html.erb page with just these 2 steps (the original, slightly more complex answer can be seen below):

First, set your routes.rb file to look like this:

MyApplication::Application.routes.draw do
  root to: 'application#index'
end

Next, move your /public/index.html file to /app/views/application/index.html.erb. Don't just copy it - move it. This means you should not have an index.html file in your /public directory.

Congratulations, you now have a dynamic index page that can handle ERB markup.

ORIGINAL ANSWER

The /public/index.html file is statically served, so you'll need to write it as if you weren't using Rails. Add your css and javascript locations to the <head> section, using <link> and <script> respectively as you would for any vanilla HTML page.

If you prefer to do this the Rails way, you'll need at the very minimum:

an entry in routes.rb
a corresponding empty controller
and an index.html file (or index.html.erb, index.html.haml, etc) at /app/views/some_name/ where some_name is the same as your controller name (minus the word 'controller').

You can then add your custom file names to your /app/assets/javascript/application.js and /app/assets/stylesheets/application.css manifests to have them pulled into the page.

Alternatively, you can edit your /app/views/layouts/application.html.erb template manually using embedded ruby. See here and here for documentation for how to do this.

Oh, one other thing - the javascript you wrote will execute before the DOM has loaded as it stands right now. To avoid this, you'll need to wrap it with something like:

$(function(){ /* your code here */ });

Collectives™ on Stack Overflow

Wiring HTML and JavaScript and CSS in a Rails Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related