如何根据Rails中的下拉列表选择修改表单?

时间:2016-03-21 16:53:02

标签: jquery ruby-on-rails ajax forms

我有一个表格要求用户根据他们在公司内的位置评估一个人。然而,用户需要选择评估他们当前不占用的不同位置的人。虽然我有一个下拉列表允许他们选择其他位置,但我的表单目前还没有更新它给用户根据新位置评估的问题。我该如何加入?

reports_controller.rb

def new

  # Find or create a new report
  @report = Report.unscoped.where(employee_id: @employee.id, author_id: current_user.id).first_or_initialize do |record|
     # Build new record if it didn't already exist
  end

  # Add skills for evaluations based on the employee's position
  @skills.includes(:positions).where(positions: { id: @employee.position.id }).each do |skill|
    @report.evaluations << Evaluation.new(skill_id: skill.id) unless @report.evaluations.any? { |e| e.skill == skill}
  end

end

_form.html.erb

<%= simple_form_for([@employee, @report] do |f| %>
  <%= f.error_notification %>

  <!-- Drop Down list where user determines which position they wish to evaluate the employee for... -->
  <%= f.association :position, label: "Position Evaluated", selected: @employee.position.id %>


  <!-- Skills for the user to evaluate the employee, should change depending on the value selected from the drop down box. -->
  <%= f.nested_fields_for :evaluations do |fn| %>
    <%= fn.input :skill_id, as: :hidden, input_html: {value: fn.object.skill.id} %>
    <%= fn.object.skill.name %>
    <%= fn.association :grade %>
    <%= fn.input :explanation, input_html: { rows: 3 } %>
  <% end %>

  <% f.button :submit, "Update Report", class: "btn btn-primary" %>
<% end %>

3 个答案:

答案 0 :(得分:1)

通常这将使用jQuery而不是Rails本身来处理。您可以根据要显示和隐藏的内容隐藏和显示表单的某些部分。 在jQuery中将隐藏的输入值设置为禁用将阻止它们向Rails发送任何数据。

您可以使用

读取所选表单对象的值
$('#selected-position :selected').change(function(){
    if // they selected position 1
        $('#position-1').show()
        $('#position-1').prop('disabled', true);
        $('#position-2').hide()
        $('#position-2').prop('disabled', false);
    elseif // and so on
});

答案 1 :(得分:0)

1)添加路由以在控制器中调用get_skills(position_id)方法,此方法返回具有技能的JSON响应。

2)在表单中,在位置字段中添加onChange选项。

3)onChange必须调用jQuery Ajax函数在后台调用get_skills(position_id)。

4)使用新值更新技能表单字段。

答案 2 :(得分:0)

1.View:

<%= f.association :position, label: "Position Evaluated", selected: @employee.position.id, id: "position-select" %>
<% if @position_eval == "Manager" %>
  <%= f.nested_fields_for :evaluations do |fn| %>
    <%= fn.input :skill_id, as: :hidden, input_html: {value: fn.object.skill.id} %>
    <%= fn.object.skill.name %>
    <%= fn.association :grade %>
    <%= fn.input :explanation, input_html: { rows: 3 } %>
  <% end %>
<% else if @position_eval == "Developer" %>
  .
  .
  .
<% end %>

2。 ajax.js.coffee

$ ->
  $(document).on 'change', '#position-select', (evt) ->
    $.ajax 'update_position',
      type: 'GET'
      dataType: 'script'
      data: {
        position: $("#position-select option:selected").val()
      }
      error: (jqXHR, status, errorThrown) ->
        console.log("AJAX Error: #{status}")
      success: (data, status, jqXHR) ->
        console.log("Get Position OK!")

3。配置/ routes.rb中

get 'report/update_position', as: 'update_position'

4。 update_position动作

def update_position
  @position_eval = params[:position]
  respond_to do |format|
    format.json {render nothing: true}
  end
end