1

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. Exemplo dos campos do formulário

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.

2 Respostas 2

2

Obrigado pelas respostas pessoal. Resolvi este problema criando uma função Ajax que chama um método no controller o qual busca no BD os dados que eu preciso jogar nos campos select e retorna no formato JSON. Assim, pego este JSON e atualizo os option dos campos select. O código pode ser visto neste link, que é a mesma pergunta, mas está no stackoverflow em inglês.

0

Tem um episódio do RailsCast que trata disso o Dynamic Select Menus, você já deu uma olhada?

Talvez esses links também sejam uteis:

https://kernelgarden.wordpress.com/2014/02/26/dynamic-select-boxes-in-rails-4/ https://rubyplus.com/articles/3691-Dynamic-Select-Menus-in-Rails-5

Estão em inglês, mas nada que o google tradutor não possa ajudar. O primeiro link é voltado mais pro ajax, e o segundo pro js.

2
  • Cite diretamente no seu post o que o site diz ao invés de colocar apenas o link. O link com o tempo pode ser desativado/editado perdendo o sentido e tornando o seu comentário inútil. Commented 19/09/2017 às 19:44
  • ok, vou ajeitar. Commented 20/09/2017 às 11:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .