CODEWITHSUNDEEP
ruby-on-railsrubyrubygems
Mallela SriPrakash
Mallela SriPrakash

Reputation: 69

How to pass selected value from dropdown and access it as a parameter for cascading dropdowns in rails

Edited: I am trying to achieve cascading dropdown.

In my 1st dropdown, I get all the distinct Names.

<%= f.input :names, collection: names.distinctnames, :label => "Select Name" %>

On selecting the name, how to access the value and pass it to controller/model so that I can filter based on the values and bind it to the next dropdown.

In my Model, I have the following scope

scope :distinctnames, ->{ Names.distinct.pluck(:names)}

Here, I want to add another scope that gives the cities for the selected name.

So, how would I get the data selected in my view and get all the values in the next dropdown.

If this is the wrong approach, can someone suggest me the alternative one with and example.

My code

<!DOCTYPE html>
<html>
<head>
  <script>
        $(document).on('change', '#names_id', function(){
          var custId = $(this).val();
          return custId;

        });
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div class="panel panel-primary">
        <div class="panle-heading">Panel Primary</div>
        <div class="panel-body">
          <%= simple_form_for @ruby, url:{action: 'create'}, html: {class: 'form'}  do |f| %>
            <%= f.select :names_id, options_for_select(Names.distinctnames), {}, {:multiple => true} %>
            <%= f.select :city_name, options_for_select(Names.where(names_id: custId).pluck(:city_name)), {}, {:multiple => true} %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
<div>
</body>
</html>

Here, at the time of loading the the view I get undefined local variable or method `custId' for #<#

How to load the all other dropdowns empty and then bind the value from the selected dropdown value to the second one.

Upvotes: 2

Views: 667

Answers (1)

Amro Abdalla
Amro Abdalla

Reputation: 584

So as I understand, You got more than one drop down list but the got dependency, Like selected value from drop-down list 1 will affect values in drop-down list 2, In this case reaching the controller action will need the form to be submitted, If what I'm thinking about is right I have more than one idea:

First one

You will use javascript or JQuery library to add this dynamic behavior to you page, the scenario is going to be like this:

1- User will select value

2- an actionListner is fired using js when select.

3- send a request to the server

4- get data according to parameters you sent to the server

5- enable the next drop-down list after binding returned data from the server.

This solution won't need you to refresh the page, Which I think will make user satisfied.

Second solution

You will put actionListner on drop-down and submit the form when user select value.

This gonna need a little bit validation in you server-side plus a little bit effort to save data that was filled if there is other inputs(saving them in instance variables I mean like @select_drop_1 and use them in inputs as user gonna feel that values are not missed).

Third solution

If it is applicable that you make this data available once user opened the form, By this I mean grouping this data, Making a query that groups cities by these distinct names, So that when user select a name, a simple js code will run enabling and binding data to the next drop-down and so on.

If I were you I would choose either first or third option, Pardon me because I don't know the schema of your application, I don't know if it is applicable to make grouping I'm imagining that Names got its table and there is another one called City.

Hope it helps.

Upvotes: 1

Related Questions