Dynamic dropdown (select_tag) with Ruby on Rails

Question

I've been trying to create 3 dynamic dropdown, wich the first change the content of the sencond and the second change the content of the thrid.

I haven't found an example for doing that, I found an example in which you send all the information to the client and there it is filtered, but it is not what I want. I want it to interact with the server every time the select has a change.

If somebody has a tutorial or could give a brief example, I would really appreciate that

Thanks

score 3 · Accepted Answer · answered May 09 '14 at 22:23

You need 3 things for it to work:

1- Javascript on change event on your select:

// This will monitor your select control and start the process after its content has changed
$('select#my_select_control').change( select_has_changed(this) );

2- Javascript Ajax controller function:

// This will send the selected value to your Rails server
function select_has_changed(obj)
{
  // We get the selected value
  var value = $(obj).val();

  // It's a good idea here to verify the value.
  // For example if the value is empty we can empty the content 
  //   of the target select control and do not go through ajax

  // We make the ajax call to the rails controller
  $.ajax({url: '/path/to/controller/action', 
          data: {value: value},
          // We are requesting for json response, but you can use html if you like
          dataType: "json",
          // Get method, or other is you like, you just have to 
          //   define it accordingly in your routes
          method: 'get'
          // This is the function to call when ajax succeed
          success: function (data) { fill_up_form(data, obj) }
  });
}

// This is called when Ajax was successful , and it will 
//   fill up your target select control
function fill_up_form(data, obj)
{
  content = ... // Here you loop through your json data to create
                //   a set of OPTION tags
                // Or if you used html as dataType, the rails server had it done
                //   so you can inject directly in your select target control
  $('select#my_target_control').html(content);
}

3- Rails controller method

# The action method that receive the ajax call
#   you must have set-up your routes accordingly 
def get_my_ajax_data
  # This fetches the data from the database
  # Note that we are using `params` with the same index as 
  #   we used in the `data` hash of the ajax call
  #   which, in my example is `value`
  records = Model.where(field: params[:value])

  # For a json request we return a collection of [id, text]
  #   that can be used to populate your target select control
  # As an alternative we could have render a template if
  #   we was requesting for html content
  render json: records.collect{ |r| {id: r.id, text: r.name} }
end

I did next, but for any reason the code is failing, and update_cities_options functions is not invoked, the problem is in the ajax section, but I dont know where function findCities(obj){ var value = $(obj).val(); $.ajax({ url: url_for(:controller=>'state', :action=>'find_cities'), data: {value: value}, dataType: "json", method: 'get', success: function (data) { update_cities_options(data, obj) } }); } — Leo, May 10 '14 at 02:56
you cannot use `url_for` in your js file. you can hard code it (not advisable, but good enough for testing) then when it works you can have a look at this library https://github.com/gazay/gon to easily pass vars from rails to js — Benjamin Bouchet, May 10 '14 at 03:23

Dynamic dropdown (select_tag) with Ruby on Rails

1 Answers1