How to use Javascript and show result for a new Ruby on Rails app

Question

I want to use javascript in Ruby on Rails framework, but it does not show any effect.

I made a html file connect with javascript. It works by double-clicking the html file and can see the javascript result.

But when I tried to put them into Ruby on Rails. I have no idea where shall I put the javascript in.

I created a new rails app with controller pages and views/pages/home.html.erb and assets/javascripts/pages.coffee. I put the html code into the pages/home.html.erb but where shall I put the javascript in- javascripts/application.js or javascripts/pages.coffee or created a new xx.js file? How to make it work? I tried to put the js code in the above, but it does not work at all. [![enter image description here][1]][1][![enter image description here][2]][2][![enter image description here][3]][3]

Pre-work I have done but not had any effect 1. Ruby on Rails-4.2 2. Have added the two gems - gem 'execjs' - gem 'therubyracer' 3. Assets/javascripts/application.js - require jquery - require jquery_ujs - require turbolinks - require_tree . 4. Installed processingjs - gem install processingjs 5. Installed node.js

require jquery
require jquery_ujs
require turbolinks
require_tree .

var jsMain = function(processingInstance){ with (processingInstance){
size(400, 400);  // set size of canvas

// add your code here ...
background(255, 0, 0);

}};

<!DOCTYPE html>
<html>
<head>
<title>Playproject</title>
</head>
<body>

<h1>Playproject 2</h1>

<h1>
<canvas id="pageCanvas"></canvas>
</h1>

<p align="center">
	<canvas id="mycanvas"></canvas>
</p>

</body>

<script src="../processing-1.4.8.min.js"></script>
<script src="/assets/javascripts/application.js"></script>
<script type="application/javascript">

var canvas = document.getElementById("mycanvas");
var processingInstance = new Processing(canvas, jsMain);

</script>
</html>

Atsushi Harada · Accepted Answer · 2015-09-13 04:02:53Z

1

The answer is put javascript in html for the present. But I think you may put javascript code in assets/javascript/pages.coffee.

You need use app/views/layouts/appliaction.html.erb because application.js need compile.

How about this?

$ rails g controller pages

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def home
  end
end

config/routes.rb

get 'pages/home' => 'pages#home'

appliation.js not changed.

downloadprocessing.js and put app/assets/javasctipts/

http://processingjs.org/

app/views/pages/home.html.erb

<h1>Playproject 2</h1>

<h1>
<canvas id="pageCanvas">canvas</canvas>
</h1>

<p align="center">
    <canvas id="mycanvas"></canvas>
</p>

</body>

<script type="application/javascript">
var canvas = document.getElementById("mycanvas");

var jsMain = function(processingInstance){ with (processingInstance){
  size(400, 400);
  background(255, 0, 0);
}};

var processingInstance = new Processing(canvas, jsMain);

</script>

answered Sep 13, 2015 at 4:02

Atsushi Harada

3391 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CarolineGao Over a year ago

Thanks Atsushi! It really helps. Can I have a couple of questions, I want to create a header which can change the size of header when I scroll down. I followed this instruction, but cannot make the javascript work on rails. callmenick.com/post/animated-resizing-header-on-scroll Thanks again and appreciate.

CarolineGao Over a year ago

It is a similar question as above, I think I do not understand how javascript is compiled in the rails structure? As above, I put all the processing js code in the application, it works, can I have another way, put those processing code in a file 'processing.js' under assets/js/processing.js, then use it in the html? Thanks again and appreciate!!

Collectives™ on Stack Overflow

How to use Javascript and show result for a new Ruby on Rails app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related