Rails4:如何在嵌套表单上进行AJAX调用

Rails 4: How do I do an AJAX call on nested forms?

本文关键字：AJAX 调用 表单 嵌套 Rails4      更新时间：2024-03-25

我正在尝试设置我的表单，以便当用户更改"位置"下拉框选择时，它将用与该位置相关的记录更新部分。我将尽我所能，包括以下所有相关代码，并首先显示错误。如果我忘记包括任何内容，请告诉我，谢谢。

错误（来自…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>

报告。咖啡

  $(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_description.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 %>

更新位置细节.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

更新的答案

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
}

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

相关文章：