updating selectbox using ajax in rails

Question

I am trying to update a selectbox of a form using ajax after creating a record but I get the following error:

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'

This is my partial _sector containing the select box:

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

This is my view index:

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

and my create.js.erb in charge of rendering the partial

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

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

Answer 1

Contrary to what you might think when including a partial inside a form element, the partial will not extend the form or be a part of the form. Therefor, depending on what you want to do, put

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

inside the same rails form tag as the "parent" (if you will) so that the same record is updated.

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

And then preferably set

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

On the select box, so that it is submitted on change when it's checked:

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