Wczytywanie listy miast po wybraniu kraju w formularzu filrującym

Zielona szkoła
1

Witam,

W swojej aplikacji mam widok users.erb.html z listą użytkowników oraz formularzem, który ma za zadanie filtrować listę użytkowników.
W formularzu są między innymi pola typu select_tag z krajem oraz z miastem. Pola ustawiają się w zależności od parametrów przkeazywanych getem: country_id oraz city_id.
Jak najprościej zrealizować coś takiego aby lista miast zaczytywała się po wybraniu kraju w combie i przy wczytaniu strony gdy w gecie jest ustawiony parametr country_id ?
Googlując, przygotowałem sobie akcję zwracającą w jsonie listę miast z ich idekami dla danego id kraju pod adresem: http://localhost:3000/cities?id=180
Jak teraz tego użyć aby przełądowywać dynamicznie combo z miastami?

2

Ok, pomęczyłem się trochę bo to dla mnie nowość ,ale w końcu zadziałało zgodnie z oczekiwaniami.

W kontrolerze users_controller.rb:

  def cities
    @cities = City.where( " country_id = ? ", params[ :id ] )
    render :json => @cities, :only => [:id, :name]
  end

W users/index.html.erb:

...
      <%= label_tag 'Country' %><br>
      <%= select_tag :country_id, options_from_collection_for_select(@countries, "id", "name", params[:country_id]),  :prompt=> "...Any...", :onchange => 'on_change_country()', :class=>"input-sm col-md-12" %><br>
      <%= label_tag 'City' %><br>
      <%= select_tag :city_id, options_from_collection_for_select(@cities, "id", "name", params[:city_id]),  :prompt=> "...Any...", :class=>"input-sm col-md-12" %><br>
...

W users/index.html.erb:

<script type = "text/javascript">
function on_change_country() {
    var country_id =  $('#country_id').val().trim();
    var $select = $("#city_id");
    $select.find('option').remove();
    $select.append( '<option value="0">...Any...</option>' )



    $.ajax({
                 url: "/cities",
                type: "GET",
            dataType: "json",
                data: { id: country_id },
            complete: function() {},
             success: function(data, textStatus, xhr){
                          $.each(data,function(key, value) {
                            $select.append('<option value=' + key.id + '>' + value.name + '</option>');
                          });
                      },
               error: function() {
                        alert("Ajax error!")
                      }
    });
}
</script>

W routes.rb:

get 'cities' => 'users#cities', as: :cities