CODEWITHSUNDEEP
ruby-on-rails
user1899082
user1899082

Reputation:

Wiring HTML and JavaScript and CSS in a Rails Application

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>

Upvotes: 0

Views: 202

Answers (1)

PinnyM
PinnyM

Reputation: 35531

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 */ });

Upvotes: 1

Related Questions