如何在从Ruby on Rails的下拉列表中执行选择时预填充表单（ajax方式）？

Question

here is my _form.html.erb partial at the moment, but I want its elements to be updated based on the first (region) dropdown selection I make:

<%= form_for(@setting) do |f| %>
  <div class="form">

     <div class="fieldBlock">
    <%= f.label :region%>
       <%= f.select :region_id, options_from_collection_for_select(Region.all, 'id',  'region_code'), 
:onChange => remote_function(:update => ":mobile, :telephone", :method => "get", :url => { :controller => :Settings, :action => :form_update, :id => :region_id}) %>
   </div>


<div class="fieldBlock">
<%= f.label :city_id, "City" %>
   <%= f.select :city_id, options_from_collection_for_select(City.all, 'id', 'name'), :prompt => 'select a city' %>
</div>


<div class="fieldBlock">
<%= f.label :mobile, "Mobile" %> <%= f.text_field :mobile%></div>

<div class="fieldBlock">
<%= f.label :telephone, "Telephone No"  %> <%= f.text_field :telephone %></div>

<div class="fieldBlock">
<% f.submit "Update Contact" %>

At present this is the controller method that helps in prepopulating:

def index
 setting = Setting.find_by_user_id(current_user.id)

 if setting.blank?
   @setting = City.first.dup

else
   @setting = setting
end

end

how do I update the form in an ajax way on selection of region dropdown list value?

Now, here is my form_update action:

 def form_update(id)
 setting = Setting.find_by_region_id(id)

   respond_to do |format|
     if setting.blank?
        @setting = Setting.first.dup
        format.json {@setting}
      else
        @setting = setting
        format.json {@setting}
      end
  end

end

I also had to use Prototype-Rails to make remote_function work. Still my fields are not getting updated, what am I missing here..

Answer 1

You need to use OnChange option of select tag

This should help [ How to add an onchange event to select tag in rails ]

A better explanation of using :onChange option of select_tag is here [ http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/select#51-Demo-select-onchange-invoke-an-ajax- ]

Edit:

Explanation: When you will select any option of your dropdown, the action provided in OnChange will be executed. Now you can make a ajax call to your server to get the values that you want to update your fields with. To do that you need remote_function ( described below).

Considering your example the following snippet should work

<%= form_for(@setting) do |f| %>
    <div class="form">
        <div class="fieldBlock">
        <%= f.label :region%>
        <%= f.select :region_id, options_from_collection_for_select(Region.all, 'id',  'region_code'), 
             :onchange => remote_function( ... ... ...) %>
    </div>
<% end %>

Above I have shown only the dropdown part of your form. Note the :onchange option here. This should contain a remote_function which will be like following

:onchange => remote_function(:update => "message_id",
                             :method => "put",
                             :with => "'item=' + value",  
                             :url => { :controller => :orders, :action => :set_customer_id, :id => order.id}))

Here:

:update : is the HTML node whose contain will be updated. So put all your :city_id , :mobile , :telephone fields in a HTML node with unique id that you will use here.
:method : just use as defined in your route. May be GET.
:with : Some extra attributes to supply with the request.
:url : The URL where you have to request.

If this still doesnt help, please share how you are trying. May be a small fix can solve the problem.

Answer 2

If you are using rails with jquery, you can try the following
http://samuelmullen.com/2011/02/dynamic-dropdowns-with-rails-jquery-and-ajax/

Though I didnt try it myself, but sounds interesting.