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 alertMy 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 script3This 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.jsThis 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 indexThis 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.rbAs you see the home_controller.rb and index.html.erb files created.
-
Now you can try out the code in action.
Start rails server withrails servercommand and visit this URL: http://localhost:3000/home/indexAnd 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.