How to generate dynamic javascript files with Ruby on Rails?

Posted by Thomas on January 7th, 2010 at 1:35 pm

Tags: javascript • programming • rails 3 • ruby

The problem

I want to write JavaScript files that use dynamic informations via Ruby on Rails. I think my solution also works with rails 2 and 3.
What can dynamic JavaScript do for you? You can write JavaScript on your ERB (embedded ruby) file beside HTML code. This is very simple, but not the best solution for a longer jQuery script.
For example:
Translation in JavaScript: translation with I18n.t() Rails method would be great in separated JavaScript file with ERB capability.

// some jquery code before alert
alert(<%= I18n.t(:forbidden_message) %>);
// some jquery code after alert

My solution

You will read about my ERB generated JavaScript solution. Haml users also can use this method.
Let see the tutorial.

ERB dynamic JavaScript with Ruby on Rails tutorial

Create a new project for this tutorial:

rails new dynamic_js_tutorial
cd dynamic_js_tutorial

Generate "js" controller, with following command on directory of your rails project:

rails generate controller js script1 script2 script3

This command produces the following output:

      create  app/controllers/js_controller.rb
       route  get "js/script3"
       route  get "js/script2"
       route  get "js/script1"
      invoke  erb
      create    app/views/js
      create    app/views/js/script1.html.erb
      create    app/views/js/script2.html.erb
      create    app/views/js/script3.html.erb
      invoke  test_unit
      create    test/functional/js_controller_test.rb
      invoke  helper
      create    app/helpers/js_helper.rb
      invoke    test_unit
      create      test/unit/helpers/js_helper_test.rb

Rename *.html.erb files to *.js on js views directory:

mv app/views/js/script1.html.erb app/views/js/script1.js
mv app/views/js/script2.html.erb app/views/js/script2.js
mv app/views/js/script3.html.erb app/views/js/script3.js

This extension helps the editors, IDEs and programmers to recognize JavaScript syntax type.

You should modify app/controllers/js_controller.rb file:

class JsController < ApplicationController
  layout false # This controller generates only javascript files
  before_filter :js_content_type # set HTTP header information 
 
  def js_content_type
     response.headers['Content-type'] = 'text/javascript; charset=utf-8'
  end
 
  def script1
    @dynamic_message = "hello" # modified
  end
 
  def script2
 
  end
 
  def script3
 
  end
end

Edit app/views/js/script1.js javascript file:
```
alert('<%= @dynamic_message %>');
```

Include script1.js in your layout file (app/views/layouts/application.html.erb):

<!DOCTYPE html>
<html>
<head>
  <title>JsProba</title>
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults, '/js/script1.js' %>
  <%= csrf_meta_tag %>
</head>
<body>
 
<%= yield %>
 
</body>
</html>

You can include your ERB generated JavaScript files any other layout, too.

Try out the ruby generated JavaScript code!

We need a HTML page to try out our dynamic JavaScript code in action.
We have to generate a HTML test page, what we can request.
Generate this page with this command:

rails generate controller home index

This command produce the following output:

      create  app/controllers/home_controller.rb
       route  get "home/index"
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/functional/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      create      test/unit/helpers/home_helper_test.rb

As you see the home_controller.rb and index.html.erb files created.

Now you can try out the code in action.
Start rails server with rails server command and visit this URL: http://localhost:3000/home/index

And you can also check the generated JavaScript source code here: http://localhost:3000/js/script1.js.