Combos dependiente en Ruby

[jhsilva]

Iniciado por patricia:)

Por favort alguien que me pueda ayudar =(

Lo que debes realizar es el uso de UJS. De forma resumida utilizaré una implementación que yo realicé de algo similar y espero te sirva.

Esto es basado en un controlador llamado traslasdos_internos_controller.rb que permitia gestionar los traslados internos dentro de un cementerio. El tema que tenia 2 select y en base a la selección de el lugar de inicio debía cargar otro select (lugar destino) con las otras sepulturas sepulturas menos la que habia sido seleccionada en el lugar de inicio


1) En el _form.html.erb al cambiar la selección del lugar de inicio enviamos una petición mediante ajax al controlador quien la procesará y responderá a ella mediante js.

Código ruby:

<div class="span-12">
  <%= f.label :'lugar Inicio' %><br />
  <%= f.collection_select :lugar_inicio, Sepultura.all, :id, :cod_sepultura, {:include_blank => 'Lugar actual'}, {:class => 'selector_title'} %>
 
</div>
 
<div class="span-5">
  <%= f.label :'Lugar Destino' %><span class="red">*</span><br />
  <%=f.select(:lugar_destino, Sepultura.all.collect {|p| [ p.cod_sepultura ,p.id ] }, {:prompt => 'Lugar destino'},:class => "selector_title")%> 
</div>
 

Ahora el codigo javascript que manipula la petición de acuerdo a la selección del select de lugar de inicio.

Código Javascript:

jQuery(document).ready(function() {
    jQuery('#traslado_interno_lugar_inicio').html("<option value=' '>Lugar actual</option>");
    jQuery('#traslado_interno_difunto_id').change(function() {
 
        var data = $('#traslado_interno_difunto_id').val();
        //alert(data);
        $.ajax({
            type: "POST",
            url: "dynamic_sepulturas/"+data,
            data: data,
 
            beforeSend: function()
            {
               $('#status').html('<img src="loading.gif">');
            },
            success: function(response)
            {
        
            }
        });
    });
});
 

2) Agregamos la ruta que recibirá mediante GET el id de la sepultura para consultar en el controlador al modelo

routes.rb

Código ruby:

match 'dynamic_sepulturas/:id', :controller=>'traslado_internos', :action => 'dynamic_sepulturas'
 

3) Ahora en el controlador manejamos la petición en su respectiv acción obteniendo el parametro enviado (:id)

Código ruby:

#Actualiza select en formulario de traslados internos
  def dynamic_sepulturas
    @difunto = Difunto.find(params[:id]) unless params[:id].blank?
    @sepultura = @difunto.sepultura(:first)
    @sepultura_nueva = Sepultura.where("cod_sepultura<>?",@sepultura.cod_sepultura)
 
  respond_to do |format|
      format.js
    end
  end
 

Lo relevante del codigo anterior es que respondimos en format.js . Entonces en nuestras views del controlador debemos crear una view con el nombre de la acción pero como .js.erb. En este caso se llamaría.

dynamic_sepulturas.js.erb

Ahora procedemos a cargar el select dependiente.

Código Javascript:

$('#traslado_interno_lugar_destino').empty();
<% for sepultura in @sepultura_nueva %>
 
      $('#traslado_interno_lugar_destino').append($("<option></option>").attr("value",<%= sepultura.id %>).text('<%= sepultura.cod_sepultura %>'));
<% end %>
 
$('#traslado_interno_lugar_inicio').empty();
 
      $('#traslado_interno_lugar_inicio').append($("<option></option>").attr("value",<%= @sepultura.id %>).text('<%= @sepultura.cod_sepultura %>'));
 

Espero os sirva. He implementado varias veces algo parecido y me ha ido bien.

Saludos cordiales