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"
.