CODEWITHSUNDEEP
jqueryajaxruby-on-rails-3routes
Valafar
Valafar

Reputation: 21

How to use js.erb templates and Ajax in Rails 3?

I have an application where I want to do some calculations on the backend, and then display the results on frontend via Ajax. I'm not using ActiveRecord.

I'm shown the JavaScript code instead of getting it executed. Webrick says following after I press the convert-button:

Started POST "/site/convert.js" for <ip address> at 2011-04-05 01:37:09 +0300
  Processing by SiteController#convert as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"K9De9/J5bsnOxqLdmvl02sOVgmU3c4gEZ/n7DBwJdrw=", "radix"=>"10", "number"=>"2", "commit"=>"Convert"}
Rendered site/convert.js.erb (0.5ms)
Completed 200 OK in 28ms (Views: 22.9ms)

Why is the JavaScript code not getting executed?

site_controller.rb:

class SiteController < ApplicationController
  def index
  end

  def convert
    number = params[:number]
    from = params[:radix]
    @decimal = Converter::convert(number, from.to_i, 10)
    @hexadecimal = Converter::convert(number, from.to_i, 16)
    @binary = Converter::convert(number, from.to_i, 2)
  end

end

site/index.html.erb:

<%= form_tag site_convert_path(:format => :js), :id => 'conversion', :remote => true do %>
    <%= radio_button_tag 'radix', 10, true %> Decimal
    <%= radio_button_tag 'radix', 16 %> Hexadecimal
    <%= radio_button_tag 'radix', 2 %> Binary
    <%= number_field_tag 'number', '', :size => '20', :min => 0 %>
    <%= submit_tag 'Convert' %>
<% end %>

<button id="convert" type="button">Convert</button>

<table>
  <thead>Conversions</thead>
  <tr>
    <th>Decimal</th>
    <th>Hexadecimal</th>
    <th>Binary</th>
  </tr>
  <tr>
    <td id="decimal_converted"></td>
    <td id="hexadecimal_converted"></td>
    <td id="binary_converted"></td>
  </tr>

</table>

site/convert.js.erb:

$('#decimal_converted').text("<%= @decimal %>");
$('#hexadecimal_converted').text("<%= @hexadecimal %>");
$('#binary_converted').text("<%= @binary %>");

routes.rb:

Conversions::Application.routes.draw do
  root :to => 'site#index'
  post 'site/convert'
end

Upvotes: 0

Views: 1042

Answers (1)

Valafar
Valafar

Reputation: 21

Problem solved. There was a problem with Rails jQuery adapter, i.e. rails.js, loading before jQuery, so following change in the layout fixed the issue:

<%= javascript_include_tag ['rails', 'jquery'] %>

changed to:

<%= javascript_include_tag ['jquery', 'rails'] %>

Upvotes: 2

Related Questions