All threads / Dynamic select boxes - like railscast 88 - but it ain't working

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Dynamic select boxes - like railscast 88 - but it ain't working

Aaron Taddiken asked in Rails

I am trying to scope a form selection list to from another select box selection. The select box groups the options correctly in the dropdown. Everything checks out in the console but it still does not scope.

app/models/slab.rb

      class Slab < ActiveRecord::Base

        ...
         belongs_to :tree
        ...
        belongs_to :thick_dict
        ...
        end

app/models/tree.rb

    class Tree < ActiveRecord::Base
    has_many :thick_dicts
    has_many :slabs, dependent: :restrict_with_exception
    end

app/models/thick_dict.rb

    class ThickDict < ActiveRecord::Base
    ...
    belongs_to :tree
    has_many :slabs, dependent: :restrict_with_exception
    end

app/views/slabs/_form.html.erb

        <%= f.grouped_collection_select :thick_dict_id, Tree.order(:name).where(client_id: current_user.client), :thick_dicts, :name, :id, :display_name, include_blank: true %><br>

apps/assets/javascript/slabs.js

jQuery(function() {
  var thick_dicts = $('#slab_thick_dict_id').html();
  console.log(thick_dicts);
  return $('#slab_tree_id').change(function() {
    var tree, options;
    tree = $('#slab_tree_id :selected').text();
    options = $(thick_dicts).filter("optgroup[label=" + tree + "]").html();
    console.log(options);
    if (options) {
      return $('#slab_thick_dict_id').html(options);
    } else {
      return $('#slab_thick_dict_id').empty();
    }
  })
});

Hey Aaron,

What exactly is it that isn't working correctly? You said that it logs things in the console correctly, which I assume means that every time you change the first select, you always get it to log the correct options for the second one?

If those are the right options being printed from the second console.log in the change event, then maybe the problem is just the html call to replace the options?

Hi Chris,

Actually I take that back...Looks like it is not scoping in the logs. It has all the options.

console.log(options):

    slabs.self-c2aef00….js?body=1:3 <option value=""></option>
<optgroup label="American Elm"><option selected="selected" value="6">8/4</option>
<option value="8">4/4</option>
<option value="9">6/4</option>
<option value="16">11/4</option></optgroup><optgroup label="Black Locust"><option value="10">12/4</option></optgroup><optgroup label="Black Walnut  "></optgroup><optgroup label="Boxelder"></optgroup><optgroup label="Butternut"><option value="7">11/4</option></optgroup><optgroup label="Catalpa"><option value="14">4/4</option></optgroup><optgroup label="Cedar"></optgroup><optgroup label="English Elm"></optgroup><optgroup label="Hackberry"></optgroup><optgroup label="Honeylocust"></optgroup><optgroup label="Mulberry "><option value="11">4/4</option>
<option value="12">12/4</option></optgroup><optgroup label="Siberian Elm"><option value="15">10/4</option></optgroup><optgroup label="Silver maple"><option value="13">8/4</option></optgroup><optgroup label="Tree of Heaven"><option value="17">8/4</option></optgroup>

Interesting, so that would mean that your filter is likely the piece that's not working correctly. You may want to also console.log tree so that you can see what that string is and verify that filter is working. I'd guess there's something up with that.

Ok, yes you are correct. I got a syntax error which was easliy fixed with single quotes around options = $(thick_dicts).filter("optgroup[label=' + tree + ']").html();

However, now once a tree is selected there are no thick_dict options showing up in the list. They do still show in the console.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 37,344+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.