Boa tarde, estou com um problema para resolver aqui na minha aplicação. O problema consiste em filtrar o campo select HTML "Solução", baseado nos valores dos outros campos selects acima dele. A imagem mostra um exemplos destes campos.
Atualmente, a aplicação está puxando os valores do banco de dados referente às tabelas Área, Região, Associado, Solução e jogando todas as áreas, regiões, associados e soluções nos campos. O que o usuário quer que seja mudado é que, quando ele seleciona uma área, uma região e um associado, o campo "Solução" mostre apenas as soluções para aquele associado que está naquela região e dentro daquela área.
Edit:
Estou quase lá! Fiz várias alterações na minha aplicação. Os campos do formulário da imagem acima são populados pela action: new
e pelo método popula_selects
que é chamado pelo parâmetro before_action :popula_selects, only: [:new, :edit]
. Criei um método novo para ser chamado pelo AJAX e atualizar o campo "Solução". Seguem os códigos abaixo:
Atendiments_Controller < ApplicationController
before_action :popula_selects, only: [:new, :edit]
def new
@atend = Atendiment.new
end
def atualiza_solucao #AJAX
@solutions = Atendiment.joins(:solution).where("atendiment_area_id = ? and atendiment_region_id = ? and atendiment_assoc_id = ?", params[:atendiment_area_id], params[:atendiment_region_id], params[:atendiment_assoc_id])
respond_to do |format|
format.js
end
end
private
def popula_selects
@atendiment_area = AtendimentArea.where(status: true, user_id: current_user.id)
@atendiment_region = AtendimentRegion.where(status: true, user_id: current_user.id)
@atendiment_assoc = AtendimentRegionAssoc.where(status: true, assoc_id: current_user.entidade_id).where(atendiment_region_id: @atendiment_region.map(&:atendiment_region_id))
@solutions = Atendiment.joins(:solution).where("atendiment_area_id = ? and atendiment_region_id = ? and atendiment_assoc_id = ?", params[:atendiment_area_id], params[:atendiment_region_id], params[:atendiment_region_assoc_id])
end
end
Código do Formulário (app/views/atendiments/_form.html.erb
<div class="atendiment-form">
<%= form_for :atendiment, url: {action: "new"}, html: {method: "get"} do |f| %>
<div class="col-xs-6">
<%= f.select :atendiment_area_id, options_for_select(@atendiment_area.collect { |c| [ c.atendiment_area.name, c.id ] }, 1), {:prompt=>"Área"}, { :class => 'form-control', :required => true, id: 'atendiment_atendiment_area_id' } %>
</div>
<div class="col-xs-6">
<%= f.select :atendiment_region_id, options_for_select(@atendiment_region.collect { |c| [ c.atendiment_region.name, c.id ] }, 1), {:prompt=>"Região"}, { :class => 'form-control', :required => true, id: 'atendiment_atendiment_region_id' } %>
</div>
</div>
</div>
<div class="field">
<%= f.select :atendiment_assoc_id, options_for_select(@atendiment_assoc.collect { |c| [ c.atendiment_region.name, c.id ] }, 1), {:prompt=>"Associado"}, { :class => 'form-control', :required => true, id: 'atendiment_atendiment_assoc_id' } %>
</div>
<div class="field">
<%= f.select :solution_id, options_for_select(@solutions.collect { |solution| [solution.name, solution.id] }, 0), {:prompt=>"Solução"}, { :class => 'form-control', :required => true, id: 'atendiment_solution_id' } %>
</div>
</div>
Rota para o novo método:
resources :atendiments do
collection do
get :atualiza_solucao
end
end
Criei uma função JQuery Ajax pra chamar o novo método e atualizar o campo Solução (app/assets/javascript/atendiment.js.coffee)
exibe_solucoes = ->
$.ajax 'atualiza_solucao',
type: 'GET'
dataType: 'script'
data: {
atendiment_area_id: $("#atendiment_atendiment_area_id").val()
atendiment_region_id: $("#atendiment_atendiment_region_id").val()
atendiment_assoc_id: $("#atendiment_atendiment_assoc_id").val()
}
error: (jqXHR, textStatus, errorThrown) ->
console.log("AJAX Error: #{textStatus}")
success: (data, textStatus, jqXHR) ->
console.log("OK!")
$(document).ready ->
$('#atendiment_atendiment_assoc_id').on 'change', ->
exibe_solucoes()
Criei então um arquivo .coffee para renderizar o parcial que vai atualizar o campo Solução (app/views/atendiment/atualiza_solucao.coffee)
$("#atendiment_solution_id").empty()
.append("<%= escape_javascript(render :partial => 'solucao') %>")
E, por último, criei o partial que será renderizado e será colocado na tag "option" do campo "solução" (app/views/atendiments/_solucao.html.erb
<option value="<%= solution.id %>" selected="selected"><%= solution.nome %></option>
Porém, por alguma razão o partial não é renderizado e o campo "solução" fica sem valor (provavelmente por causa do método empty()
. No console, é possível ver o erro "500 (Internal Server Error)". Não sei porque está dando este erro. Uma coisa que percebi é que a aplicação não printa nem o que está no console.log()
do "error" na função AJAX, nem o que está no "success". Outra coisa que eu percebi é que, quando eu altero o html do partial "solucao", fazendo algo assim:
<option value="foo" selected="selected">bar</option>
Ele funciona e exibe "bar" no campo "Solução". Só com o código ruby embutido ele não funciona... Se alguém puder me dar uma ideia do que fazer, agradeço muito.
OBS.: Estou utilizando a versão 4.2.1 do rails nesta aplicação. Obrigado pela atenção de todos e pelo tempo dedicado a ler esta questão, que ficou mais longa do que deveria.