javascript - Rails 5 不渲染 JQuery 结果

Question

我想我把 JQuery 和 Rails 实践弄乱了，我打算从“form_tag”获取两个参数，然后在 View 中的“”内渲染 Controller 中所做的计算结果，我得到结果 WebView (Chrome 开发者工具)，但 .这是相关代码:路线:

get '/calculator', to: 'users#bmi_calc'

users_controller.rb:

def bmi_calc
  bmi_table = {
  "Very severely underweight"             => { from: 0.0, to: 15.0 },
  "Severely underweight"                  => { from: 15.1, to: 16.0 },
  "Underweight"                           => { from: 16.1, to: 18.5 },
  "Normal (healthy weight)"               => { from: 18.51, to: 25.0 },
  "Overweight"                            => { from: 25.1, to: 30.0 },
  "Obese class I (moderately obese)"      => { from: 30.1, to: 35.0 },
  "Obese class II (severely obese)"       => { from: 35.1, to: 40.0 },
  "Obese class III (very severely obese)" => { from: 40.1, to: 60.0 },
  "Pure fat factor"                       => { from: 60.1, to: 100.0}
  }
  weight = params[:mass].to_f
  height = params[:height].to_f
  if weight > 0 && height > 0
    resultado = ''
    @bmi = weight / height ** 2
    bmi_table.each do |advice, range|
      if (@bmi > range[:from]) && (@bmi < range[:to])
        resultado = advice
      end
    end
    respond_to do |format|
      format.json { render json: {resultado: resultado} }
    end
  else
    redirect_to current_user
  end
end

users.js.erb:

$(document).ready( function(){
  $("#calculator-img").click( function(){
    $.getJSON('/calculator', function(data) {
      var res = data.resultado;
      $("#bmi-result").html(res);
    });
  });
});

用户/show.html.erb:

<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1><%= @user.name %></h1>
    </section>
    <section class="bmi_form">
      <%= render 'bmi_form' %>
    </section>

    <div id="bmi-result">

    </div>
  </aside>
  <div class="col-md-6">
    <section class="mid_section">
      <p>Some text</p>
      <h2>BMI standard table</h2>
      <%= image_tag "BMItable.png", alt: "BMI stardard table" %>
    </section>
  </div>
</div>

_bmi_form.html.erb:

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left" do %>
  <%= label_tag :mass, "Your mass (weight) in Kg" %>
  <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %>

  <%= label_tag :height, "Your height in meters" %>
  <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %>

  <%= image_submit_tag("BMI.gif", id: "calculator-img") %>
<% end %>

最后，这是我在 Chrome 开发者工具中得到的结果:

请帮助我理解我做错了什么。谢谢(这是我打算解决的挑战:https://gist.github.com/JonaMX/d29a754ae625664b0cf7最后我交付了，但我必须渲染一个新页面，结果......一点也不漂亮)

Answer 1

您需要将处理函数绑定(bind)到表单的 ajax 请求。首先向您的表单添加一个 id:

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left", id: "bmi-form" do %>
  <%= label_tag :mass, "Your mass (weight) in Kg" %>
  <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %>

  <%= label_tag :height, "Your height in meters" %>
  <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %>

  <%= image_submit_tag("BMI.gif", id: "calculator-img") %>
<% end %>

然后将您的 JavaScript 更改为如下所示:

$(document).ready( function(){
  $("#bmi-form").on( "ajax:success", function(evt, data, status, xhr){
    var res = data.resultado;
    $("#bmi-result").html(res);
  });
});

有关更多信息，请参阅 http://guides.rubyonrails.org/working_with_javascript_in_rails.html