javascript - rails 4 : How do I do an AJAX call on nested forms?

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

更新的答案

views/posts/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 %>

javascripts/posts/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
}

总而言之，当用户从下拉列表中进行选择时，这一切都将重新加载页面。但是不是重新加载整个页面，而是只更新数据目标元素。这也适用于页面上的多个嵌套关联记录。