1

Soy nuevo en Rails. Necesito realizar un lista de selección (select_tag) ya que tengo dos modelos: uno de proyectos y otro de Actividades los cuales están relacionando de la siguiente forma: un proyecto tiene muchas actividades.

Lo que requiero es que cuando seleccione un Proyecto dinámicamente me aparezcan en otro select_tag las actividades que están relacionas con el dicho proyecto.

1
  • Hola Leonard, bienvenido a SOes. Te sugiero leer Cómo preguntar para que tus preguntas sean mejor recibidas. En vez de agradecer en la misma pregunta puedes votar o aceptar una respuesta que te sea útil. Commented el 16 ago. 2017 a las 0:54

1 respuesta 1

2

Te recomiendo utilizar el helper collection_select en lugar de select_tag, es más sencillo pues está pensado para generar elementos select a partir de modelos.

Lo que buscas es sencillo (rails te facilita mucho el camino) y sólo necesitas de cuatro puntos para lograrlo:

  • Generar una acción en el controlador para responder a la solicitud AJAX.
  • Actualizar tus rutas para poder alcanzar esa acción en el controlador.
  • Generar el script para realizar la solicitud AJAX.
  • Generar la vista (js) asociada a la nueva acción del controlador.

Ejemplo:

Modelos

# app/models/project.rb

class Project < ApplicationRecord
  # atributos/columnas: id, name
  has_many :activities
end
# app/models/activity.rb

class Activity < ApplicationRecord
  # atributos/columnas: id, name, project_id
  belongs_to :project
end

Controlador

# controllers/activities_controller.rb

class ActivitiesController < ApplicationController   
  def new
    @projects = Project.all
  end

  # otras acciones

  def options
    @activities = Activity.where(project_id: params[:project_id])
  end
end

La acción puedes agregarla en cualquier controlador (si deseas seguir fiel a REST), en el ejemplo la puse en el mismo controlador de ActivitiesController para mantenerlo simple.

También podrías obtener las actividades con:

@activities = Project.find(params[:project_id]).activities

Y obtendrías el mismo resultado, sin embargo no decidí utilizar esta opción ya que genera dos consultas a la BD (la que puse en el ejemplo solo genera una).

Rutas

# config/routes.rb

Rails.application.routes.draw do
  resources :activities
  post 'activities/options', as: 'activities_options'
  # otras rutas
end

Además de las rutas REST generadas con resources, agregamos la nueva ruta para options, la cual debe ser post.

Vistas

<!-- app/views/new.html.erb -->

<div id="projects">
  <%= collection_select(:project, :name, @projects, :id, :name, prompt: "Seleciona proyecto") %>
</div>
<div id="activities"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#project_name').on('change', function() {
      $.ajax({
        url:  "<%= activities_options_path %>",
        type: "POST",
        data: { project_id: $(this).val() }
      });
    });
  });
</script>

collection_select utiliza la variable @projects para generar las opciones; en este caso mostrará todos los proyectos, donde el id será el valor y name será el text que se muestre.

El script llama la nueva ruta generada enviando el (a través de POST) el project_id, con el cual se obtienen las actividades que deseas mostrar en el nuevo select.

El div con id="activities" está simplemente reservando el espacio donde se ubicará el select de actividades una vez que sea generado.

/* app/views/options.js.erb */

var html = "<%= j(collection_select(:activity, :name, @activities, :id, :name)) %>";
$('#activities').html(html);

Al ser js.erb utilizas únicamente JavaScript/jQuery (la j en j(collection.select(...) se utiliza para poder generar html que sea aceptado por javascript) con el cual indicamos que genera un nuevo select con las actividades del proyecto (i.e. @activities) y que este sea agregado dentro del div con id="activities".

14
  • ! Al comienzo empecé a utilizar collection pero debido a que no lograba intente hacerlo con select_tag probaré! Gracias! Saludos. Commented el 16 ago. 2017 a las 11:21
  • @LeonardJ.ÁvilaS. Lo importante del collection_select es entender los argumentos: objeto del modelo (:project), método/columna (:name), opciones (@projects), valor para las opciones (:id) y texto para las opciones (:name).
    – Gerry
    Commented el 16 ago. 2017 a las 14:53
  • Saludos Gerry! Hice un proyecto nuevo en (rails) para probar lo que me indicaste, pero me ocurre algo no se me renderiza el colletion de actividades pareciera que no esta tomado el new.js.erb primera vez que uso (file.js.erb) :( No se si falta colocar algo en el controlador para responder. Commented el 17 ago. 2017 a las 0:33
  • @LeonardJ.ÁvilaS. Ohh, cometí un error: la vista se debe llamar igual que la acción; cambia el nombre de new.js.erb a options.js.erb (que es la acción que responde al AJAX). He actualizado mi respuesta para reflejar el cambio.
    – Gerry
    Commented el 17 ago. 2017 a las 0:42
  • Listo! Lo cambie el nombre y nada no se muestra el colletion. Qué dices si subo el proyecto a Git para que lo puedas ver. :((( Commented el 17 ago. 2017 a las 0:49

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.