在rails中使用ajax更新选择框

Question

我在创建记录后尝试使用 ajax 更新表单的选择框，但出现以下错误：

ActionView::Template::Error (undefined local variable or method `f' for #<#<Class:0x89d20be8>:0x89d05118>):
    1: <%= f.label :Sector, "Sector:", class: "control-label col-md-3"  %>
    2: <div class="col-md-4">
    3:   <%= f.select :Sector, options_for_select(@catgrupos.map{|e|[e.Descripcion, e.Clave]}) %>
    4:   <button type="button" class="btn btn-default" data-toggle="modal" data-target="#mynewcategory">
  app/views/productos/_sector.html.erb:1:in `_app_views_productos__sector_html_erb___812830609__998268098'
  app/views/catgrupos/create.js.erb:4:in `_app_views_catgrupos_create_js_erb___970001663__998252138'

这是包含选择框的部分 _sector：

<%= f.label :Sector, "Sector:", class: "control-label col-md-3"  %>
<div class="col-md-4">
  <%= f.select :Sector, options_for_select(@catgrupos.map{|e|[e.Descripcion, e.Clave]}) %>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#mynewcategory">
    ...
  </button>
</div>

这是我的视图索引：

<!-- Modal create action -->
<%= form_for(@producto, remote: true, html: {class: "form-horizontal producto-validado"}) do |f| %> <!--ajax remote: true-->
  <div class="modal fade" id="mynewproducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Agregar producto</h4>
        </div>
        <div class="modal-body">

          <div class="form-group">

            <%= f.label :Clave, "Clave:", class: "control-label col-md-3"  %>
            <div class="col-md-7">
              <%= f.text_field :Clave, class: "form-control producto_clave",autofocus: true, minlength: "1", required: "true"   %>
            </div>

          </div>

          <div class="form-group">

              <div id="sector"><%= render 'sector', f: f  %></div><!--f:f es para que el parcial funcione con el formulario-->

            <%= f.label :Granel, "granel:", class: "control-label col-md-2"  %>
            <div class="col-md-1">
              <%= f.check_box :Granel, class:"producto_granel" %>
            </div>
          </div>


        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="mynewproductoclose">Cerrar</button>
          <%= submit_tag "Crear", class: "btn btn-primary", data: { disable_with: 'Creando' }%>
        </div>
      </div>
    </div>
  </div>
<%end%>
</div>


<!-- Modal create action -->
<%= form_for(@catgrupo, remote: true, html: {class: "form-horizontal "}) do |c| %> <!--ajax remote: true-->
  <div class="modal fade" id="mynewcategory" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Agregar categoria</h4>
        </div>
        <div class="modal-body">

          <div class="form-group">

            <%= c.label :Clave, "Clave:", class: "control-label col-md-3"  %>
            <div class="col-md-7">
              <%= c.text_field :Clave, class: "form-control catgrupo_clave",autofocus: true, minlength: "1", required: "true"   %>
            </div>

          </div>

          <div class="form-group">
            <%= c.label :Descripcion, "Descripcion:", class: "control-label col-md-3"  %>
            <div class="col-md-9">
              <%= c.text_field :Descripcion, class: "form-control catgrupo_descripcion", minlength: "3", required: "true"   %>
            </div>
          </div>



          <div class="form-group">
            <%= c.label :Status,"Activo:", class: "control-label col-xs-7 col-sm-6 col-md-2"%>
            <div class="col-md-1">
              <%= c.check_box :Status,{checked: true} %>
            </div>
          </div>
            <%= c.hidden_field :IdEmpresa, value: current_usuario.empresa_id %>
            <%= c.hidden_field :TipoGrupo, value: "P" %>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="mynewcategoryclose">Cerrar</button>
          <%= c.submit "Crear", class: "btn btn-primary", data: { disable_with: 'Creando' }%>
        </div>
      </div>
    </div>
  </div>
<%end%>

我的 create.js.erb 负责渲染部分

$(".catgrupo_clave").val('');
$(".catgrupo_descripcion").val('');

$("#sector").html("<%= escape_javascript(render("productos/sector"), :locals => {:f => f})%>")

Answer 1

我没有投反对票，因为我认为这是一个有效的问题，而且我记得在构建一个拆分为多个部分的表单时，我自己也在为此苦苦挣扎。

与您在表单元素中包含分部时的想法相反，分部不会扩展表单或成为表单的一部分。因此，根据你想做什么，放

<%= f.label :Sector, "Sector:", class: "control-label col-md-3"  %>
<div class="col-md-4">
<%= f.select :Sector, options_for_select(@catgrupos.map{|e|[e.Descripcion, e.Clave]}) %>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#mynewcategory">
</button>
</div>

在与“父”相同的rails表单标签内（如果你愿意的话），以便更新相同的记录。

<%= form_for(@producto, remote: true, html: {class: "form-horizontal producto-validado"}) do |f| %> 

然后最好设置

 :onchange => ("$(this).submit()")

在选择框上，以便在选中时提交更改：

<%= f.select :Sector, options_for_select(@catgrupos.map{|e|[e.Descripcion, e.Clave]}), :onchange => ("$(this).submit()") %>