Rails 4：我如何對嵌套表單進行AJAX調用？

Question

我試圖設置我的表單，以便當用戶更改「位置」下拉框選擇時，它將更新與該位置相關的記錄的部分。我將盡我所能包含所有相關的代碼，並首先顯示錯誤。如果我忘記包含任何內容，請告訴我，謝謝。

錯誤（從... jqXHR.responseText）

AJAX Error: NameError in Players::Reports#update_position_specifics 

Showing ../app/views/players/reports/update_position_specifics.js.erb where line #2 raised: 
undefined local variable or method `f' for #<#<Class:0x007f9b82ebdcf8>:0x007f9b82fc8030> 

reports.coffee

$(document).on 'change', '#report_position_id', (evt) -> 
    $.ajax 'update_position_specifics', 
     type: 'GET' 
     dataType: 'script' 
     data: { 
     position_graded_id: $("#report_position_id option:selected").val() 
     } 
     error: (jqXHR, textStatus, errorThrown) -> 
     console.log("AJAX Error: #{jqXHR.responseText}") 
     success: (data, textStatus, jqXHR) -> 
     console.log("Dynamic position select OK!") 

_form.html.erb

<%= simple_form_for([@player, @report], html: {id: 'report-form'}) do |f| %> 
    <%= f.association :position, selected: @position_graded.id %> 
    <div id="position_specifics"> 
    <%= render 'form_position_specifics', f: f %> 
    </div> 
<% end %> 

_form_position_specifics.html.erb

<%= f.nested_fields_for :evaluations, 
     f.object.evaluations.target.sort_by! { |a| a.skill.order_by }, 
     wrapper_tag: :tr, wrapper_options: { class: 'fields' } do |fn| %> 
    <% # Form fields here... %> 
<% end %> 

update_position_specifics.js.erb

$("#position_specifics").empty().append("<%= escape_javascript(render partial: 'form_position_specifcs', f: f") %>") 

reports_controller.rb

def update_position_specifics 
    # remove previous/existing position specific skill from evaluations 
    @report.evaluations.joins(:skill).where(skills: { type: 'position specifcs'}).delete_all 

    # add new position specifics from specified position 
    @skills = Skill.joins(:positions).where(position_id: @position_graded.id) 

    # Add new evaluations to report 
    @skills.joins(:positions).where(positions: {id: @position_graded_id}, disabled: false).each do |skill| 
    @report.evaluations << Evaluation.new(skill_id: skill.id 
    end 

end 

Answer 1

更新回答

的意見/職位/ new.html.erb

<%= form_for(@post, id: 'myform') do |f| %> 
    <%= f.association :pictures do |ff| %> 
    <% target = "picture-#{ff.object.id}-div-that-will-updated" %> 

    <%= ff.select :category, 'data-target': target %> 
    <%= ff.file_field :file %> 

    <!-- This is the element that will be updated when <select> above is changed --> 
    <div id='<%= target %>'></div> 
    <% end %> 
<% end %> 

的JavaScript /職位/ new.js

$('#myform').find('select').change(function() { 
    // get the data-target of the <select>, then load that target element with the new partially loaded (current url) target element 
    $('#' + $(this).attr('data-target')) 
    .load(window.location.href + ' #' + $(this).attr('data-target')); 
    // Take note of the space in ' #' above 
} 

總之，當用戶從下拉選擇什麼這一切都將做的是，該頁面只是重新加載。但不是重新加載整個頁面，只更新數據目標元素。這也適用於頁面上的多個嵌套關聯記錄。