如何根據Rails中的下拉列表選擇來修改表單？

Question

我有一個表格要求用戶根據他們在公司內的職位來評估一個人。但是，用戶需要選擇評估處於他們當前不佔據的不同位置的人員。雖然我有一個允許他們選擇其他職位的下拉列表，但我的表單目前不會更新用戶根據新職位評估的問題。我將如何納入這一點？

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 %> 

Answer 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 
}); 

Answer 2

1讀取選定表單對象的值）添加路由調用get_skills（position_id）方法在你的控制器，該方法返回與技能的JSON響應。

2）在表單中，在位置字段中添加onChange選項。

3）onChange必須調用一個jQuery Ajax函數在後臺調用get_skills（position_id）。

4）用新值更新技能表單字段。

Answer 3

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