3

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

1 Answer 1

3

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
Sign up to request clarification or add additional context in comments.

2 Comments

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 <code> 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) } }); } </code>
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 github.com/gazay/gon to easily pass vars from rails to js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.