2016-08-01 23 views
1

Ich versuche, einige dynamische Dropdown-Menüs in einem Suchformular mit form_tag einzurichten. Was ich möchte, ist eine ähnliche Funktionalität wie das Beispiel bei Railcasts #88 gefundenRails4 Dynamic Select Dropdown

Modelle:

class Count < ActiveRecord::Base 
    belongs_to :host 
end 

class Host < ActiveRecord::Base 
    belongs_to :site 
    has_many :counts 
end 

class Site < ActiveRecord::Base 
    belongs_to :state 
    has_many :hosts 
end 

class State < ActiveRecord::Base 
    has_many :sites 
end 

Ausblick:

<%= form_tag(counts_path, :method => "get", id: "search-form") do %> 
    <%= select_tag "state_id", options_from_collection_for_select(State.all.order(:name), :id, :name) %> 
    <%= select_tag "site_id", options_from_collection_for_select(Site.all.order(:name), :id, :name) %> 
<% end %> 

Ein Staat has_many Seiten, die has_many Hosts, die viele Grafen hat. Oder umgekehrt, Zählungen gehören_zu Host, das gehört_zu Seite, die zu Staat

gehört

So würde ich gerne einen Staat aus dem Dropdown-Staaten wählen, die dann die Sites basierend auf dem Status gruppieren würde, den sie durch den Host assoziieren.

Ich habe mit dieser verschachtelten Assoziation gekämpft und kann nicht herausfinden, wie die gruppierte_Auswahl erstellt wurde.

Ich weiß, ich übersehe etwas offensichtlich! Könnte sicher einige Zeiger verwenden ...

Antwort

1

Sie können jquery-ajax Anfrage auslösen. Das Ereignis in der ersten Auswahlbox ändern ruft die Aktion auf dem Controller auf und die aufgerufene Methode ändert den Wert der zweiten Dropdown-Funktion durch den Ajax-Aufruf. Einfaches Beispiel:

Ihrer Ansicht Datei:

<%= select_tag 'state_id', options_for_select(State.all.order(:name), :id, :name) %> 

<%= select_tag "site_id", options_for_select(Site.all.order(:name), :id, :name) %> 

In JS-Datei von diesem Controller:

$(document).on('ready page:load', function() { 
$('#state_id').change(function(event){ 
     $("#site_id").attr('disabled', 'disabled')   
     $.ajax({ 
    type:'post', 
    url:'/NameOfController/NameOfMethod', 
    data:{ state_id: $(this).val() }, 
    dataType:"script" 
    }); 
    event.stopImmediatePropagation(); 
}); 

});

In NameOfController.rb

def NameOfMethod 
    ##no need to write anything 
end 

In NameOfMethod.js.erb

<% if params[:state_id].present? %> 
    $("#site_id").html("<%= escape_javascript(render(partial: 'site_dropdown'))%>") 
<% end %> 

in _site_dropdown.html.erb Datei:

<% if params[:state_id].present? %> 
    <%= select_tag 'site_id', options_for_select(Site.where("state_id = ?", params[:state_id])) %> 
<% else %> 
    <%= select_tag "site_id", options_for_select(Site.all.order(:name), :id, :name) %> 

So wird es Website ändern Dropdown-Liste basierend auf dem Dropdown-Menü für ausgewählte Status. Sie können bis zu einer Anzahl von Ebenen für die Suche gehen. Viel Glück.