Combos dependiente en Ruby

[patricia:)]

Hola a todos,

Estoy usando ruby 1.8.7 y rails 2.3.14, estoy intentando crear 2 combos donde el 2do depende de lo que se seleccione en el primero.

El 1ro lee de la tabla proyecto y el 2do busca las fases de ese proyecto seleccionado y esas 2 selecciones debe insertarse en la tabla activifases.

Intente utilizar la libreria de javascript http://ajax.googleapis.com/ajax/libs.../jquery.min.js y no me funciono.

En el controlador de Fases cree el siguiente metodo

Código:

def for_proyectoid 
    @fases = Fase.find_all_by_proyecto_id(params[:id])
    #Notifier.deliver_gmail_message('[email protected]', @fases.descripcion, 'enviando correo de prueba')
    respond_to do | format |
        format.json  { render :json => @fases }
    end
  end

en el new de activifases coloque lo siguiente:

Código:

<script type="text/javascript">
    $(document).ready(function(){
        $("select#activifase_proyecto_id").change(function(){
            var id_value_string = $(this).val();
            alert(id_value_string);
            if (id_value_string == "") { 
                // if the id is empty remove all the fases options from being selectable and do not do any ajax
                $("select#activifase_fase_id option").remove();
                var row = "<option value=\"" + "" + "\">" + "" + "</option>";
                $(row).appendTo("select#activifase_fase_id");
                
            }
            else {
                // Send the request and update sub category dropdown 
                $.ajax({
                    dataType: "json",
                    cache: false,
                    url: '/fases/for_proyectoid/' + id_value_string,
                    timeout: 5000,
                    error: function(XMLHttpRequest, errorTextStatus, error){
                        alert("Failed to submit : "+ errorTextStatus+" ;"+error);
                    },
                    success: function(data){                           
                        // Clear all options from sub category select 
                        //put in a empty default line
                        var row = "<option value=\"" + "" + "\">" + "" + "</option>";
                        $(row).appendTo("select#activifase_fase_id"); 
                        alert( $("select#activifase_fase_id"));                        
                        // Fill sub category select                         
                        $.each(data, function(i, j){
                            row = "<option value=\"" + j.fases.id + "\">" + j.fases.descripcion + "</option>";                             
                            $(row).appendTo("select#activifase_fase_id");   
                                                     
                        });             
                     }
                });
            };
                });
    });
</script>
<% form_for @activifase do |f| %>
  <p>
    <%= f.label :proyecto_id %>
    <%= f.collection_select :proyecto_id, Proyecto.find_by_sql("select c.* from jerarquias x, usuarios b ,jerarquias_proyectos d , proyectos c where x.empleado_id = b.id and   nvl(x.fecha_hasta, sysdate)>=sysdate and   d.supervisor_id = x.supervisor_id and   d.empleado_id   = x.empleado_id and   to_number(c.creado_por) = x.supervisor_id and   nvl(c.fecha_hasta,sysdate)>=sysdate and   c.id = d.proyecto_id and   b.id = #{@user.id}"), :id, :descripcion, :prompt => "Seleccione un Proyecto" %>
  </p>
  <p >
    <%= f.label :fase_id %>
   <%= f.collection_select :fase_id, Fase.find_all_by_proyecto_id(@activifase.proyecto_id), :id, :descripcion, :prompt => '' %>
  </p>  
<% end %>

Probe y el 2do combo no se esta llenando, pense que el procedimiento for_proyectoid (controlador fases) no estaba funcionando sin embargo al correrlo desde el explorer " http://localhost:3000/fases/for_proyectoid/10120 " me retorna lo siguiente

Código:

[{"fase":{"proyecto_id":10120,"created_at":"2012-04-06T22:36:04Z","updated_at":"2012-04-06T22:36:04Z","descripcion":"Analisis","id":10100,"fecha_desde":"2012-04-06T00:00:00Z","tiempo_estimado":null,"fecha_hasta":"2012-04-17T00:00:00Z","status":null}},{"fase":{"proyecto_id":10120,"created_at":"2012-04-06T22:36:04Z","updated_at":"2012-04-06T22:36:04Z","descripcion":"Dise\u00f1o ","id":10101,"fecha_desde":"2012-04-18T00:00:00Z","tiempo_estimado":null,"fecha_hasta":"2012-04-26T00:00:00Z","status":null}},{"fase":{"proyecto_id":10120,"created_at":"2012-04-06T22:36:04Z","updated_at":"2012-04-06T22:36:04Z","descripcion":"Implementacion","id":10102,"fecha_desde":"2012-04-26T00:00:00Z","tiempo_estimado":null,"fecha_hasta":"2012-05-06T00:00:00Z","status":null}},{"fase":{"proyecto_id":10120,"created_at":"2012-04-07T17:46:30Z","updated_at":"2012-04-07T17:46:30Z","descripcion":null,"id":10120,"fecha_desde":"2012-04-07T00:00:00Z","tiempo_estimado":null,"fecha_hasta":"2012-04-07T00:00:00Z","status":null}}]

He revisado iles de veces y ya no se que hacer, por favor si me pueden ayudar, se los agradecere infinitamente.

Saludos,
Patricia

[patricia:)]

Por favort alguien que me pueda ayudar =(

[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