使用ajax更新选择框

Question

I'm trying to update a select box after creating a record from another controller("catgrupo"), but I'm getting the following error:

ActionView::Template::Error (undefined local variable or method `f' for #<#<Class:0x823b16cc>:0x83166ba0>):
    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]}), class: "dropdown"  %>
    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__765082245__1048172888'
  app/views/catgrupos/create.js.erb:4:in `_app_views_catgrupos_create_js_erb___845788789__1047898388'

This is my producto index, this view contains the modal windows for the creation of "productos" and "catgrupo"

<%= form_for(@producto, remote: true, html: {class: "form-horizontal producto-validado"}) do |f| %> 
  <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">
            <%= f.label :Producto, "Producto:", class: "control-label col-md-3"  %>
            <div class="col-md-9">
              <%= f.text_field :Producto, class: "form-control producto_producto", minlength: "3", 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>

            <%= f.hidden_field :IdEmpresa, value: current_usuario.empresa_id %>
            <%= f.hidden_field :Status, value: "A" %>






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

This is my partial "sector" in this partial will be the selectbox that I want to update and the button that calls the modal window to create "catgrupo"

<%= 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]}), class: "dropdown"  %>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#mynewcategory">
    ...
  </button>
</div>

I want to update the "sector" selectbox from producto, when "catgroup" is created. this is the catgroup create action

def create
    @catgrupo = Catgrupo.new(catgrupo_params)
    @catgrupos = Catgrupo.activos.producto_sector.por_empresa(current_usuario.empresa_id)

    respond_to do |format|
      if @catgrupo.save
        format.html { redirect_to @catgrupo, notice: 'Catgrupo was successfully created.' }
        format.json { render :show, status: :created, location: @catgrupo }
        format.js {flash.now[:notice] = 'La categoria se ha creado de forma exitosa.'} #ajax
      else
        format.html { render :new }
        format.json { render json: @catgrupo.errors, status: :unprocessable_entity }
        format.js {flash.now[:alert] = 'Error al crear la categoria.'} #ajax
      end
    end
  end

the create.js.erb from "catgrupo"

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

$("#sector").html("<%= escape_javascript(render("productos/sector"))%>")
$("#notice").html("<%= escape_javascript(render :partial => 'partials/flash' , :locals => { :flash => flash }).html_safe %>");

setTimeout(function(){
  $('#notice').fadeIn("slow", function() {
    $(this).create();
  })
}, 1500);

this is index action from producto_controller

  def index
    @productos = Producto.activos.por_empresa(current_usuario.empresa_id)
    @producto = Producto.new
    @catgrupo = Catgrupo.new

    @catgrupos = Catgrupo.activos.producto_sector.por_empresa(current_usuario.empresa_id)
    respond_to do |format|
      format.html
      format.csv { send_data @productos.to_csv}
      format.xls
    end

  end