Update a selectbox using ajax

0

I'm trying to update a select box after creating a regristro from another controller (called "catgrupo" creating categories), 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 the product index, in this view there is the modal window for the creation of "products" and "catgroup"

<%= 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" that is in the "product" form and in this partial is the selectbox that I want to update and the button to call the modal window to create "catgroup"

<%= 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 selecbox within the partial called "sector" when a record is created in "cargroup". this is the create action of "catgrupo"

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 of "catgroup"

$(".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 the index action of product_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
    
asked by LuisC 15.01.2017 в 20:13
source

1 answer

2

Throws you undefined local variable or method 'f' , since you are not passing the required variable f to your partial, so instead of:

<%= render 'sector', f: f  %>

Occupy:

<%= render partial: 'sector', locals: {f: f} %>

which is the correct way. Note that when you use locals , you must also specify your partial with the key partial within the hash to send.

    
answered by 16.01.2017 в 01:50