up

How to generate dynamic javascript files with Ruby on Rails?

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

  1. Create a new project for this tutorial:
    rails new dynamic_js_tutorial
    cd dynamic_js_tutorial
  2. 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
  3. 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.

  4. 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
  5. Edit app/views/js/script1.js javascript file:
    alert('<%= @dynamic_message %>');
  6. 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!

  1. 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.

  2. 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.

Now you can write dynamically generated JavaScipt files in Ruby on Rails. You may use it on real your projects.

Add new comment