Dynamic Select Menus for Rails 3

Rails
1

Guys help me please. How to convert this rails-cast to rails 3 ? I’m
trying to convert it but still there is no luck.

Thanks in Advanced. c",)

2

On Feb 6, 2012, at 1:41 AM, sly verano wrote:

Guys help me please. How to convert this rails-cast to rails 3 ? I’m
trying to convert it but still there is no luck.

#88 Dynamic Select Menus - RailsCasts

Thanks in Advanced. c",)

Are you using jQuery or Prototype in the rest of your app? The code on
this 'cast is Prototype, so the only differences you will need to cover
are in that realm. Everything else should just work.

Walter

3

On Mar 26, 2012, at 9:26 PM, Cluter V. wrote:

$ rails generate model basket shape:string
def self.up
def self.down
belongs_to: baskets
end

<% end %>

source ‘http://rubygems.org’
gem ‘uglifier’
in the app/assest/javascript/table.js.coffee I have
else
$(‘#table_apple’).empty()

but this script doesn’t work 'cause onchange the first one {basket} the
second one is empty!

I don’t know where’s my mistake

thanks a lot in advance,

C

You cannot update the contents of a select using html() (which is
similar to Prototype’s update() function). The only way to alter the
options of a select cross-browser is to do the following:

  1. Make a structure of your new elements, something like:

var newOptions = [[‘one’,‘One’],[‘two’, ‘Two’],[‘three’, ‘Three’]]

  1. Remove all of the existing options:

myPicker.options.length = 0;

  1. Loop through your array of new options, and build them up one at a
    time into options on the now-empty picker:

for(i = 0; i < newOptions.length; i++){
myPicker.options[myPicker.options.length] = new
Option(newOptions[i][0], newOptions[i][1];
}

Hope this helps,

Walter

4

What exactly aren’t you having luck with? Do you need help with the
JQuery conversion?
As Walter Lee said, Rails 3 defaults with JQuery now.

5

Hi,

I also want a dynamic select menu but I want use jQuery and in my case
it doesn’t works (I follow a different sly verano’s tutorial) follow all
my steps

NOTE: I want use a list of data from a database

HOW CREATE the MODELS

$ rails generate model basket shape:string
$ rails generate model apple color:string shape_id:integer
$ rails generate model table basket:string apple:string

populate the database with a migration

$ rails generate migration create_hierarchy

/db/20120306193843_create_hierarchy.rb

class CreateHierarchy< ActiveRecord::Migration
def self.up
g1 = Basket.create(:shape => “awesome”)
g2 = Basket.create(:shape => “normal”)

a1 = Apple.create(:color => "Green", :basket_id => g1.id)
a2 = Apple.create(:color => "Reds", :basket_id => g1.id)
a3 = Apple.create(:color => "White", :basket_id => g2.id)
a4 = Apple.create(:color => "Purple", :basket_id => g2.id)

end

def self.down

you can fill this in if you want.

end
end

MODELS

I have 3 model @table, @basket, @apple

class Apple
belongs_to :tables
belongs_to: baskets
end

class Basket
belongs_to :tables
has_many :apples
end

class Table
has_many :baskets
has_many :apples
end

CONTROLLER

in the @table controller I have

def index
@basket = Basket.find(:all)
@apple = Apple.find(:all)
@table = Table.new
end

VIEWS

the form is in app/views/tables/index.html.erb file

<%= form_for @table do |f| %>
<%= f.collection_select(:basket, @basket, :id, :shape, {:prompt =>true})
%>
<%= f.collection_select(:apple, @apple, :id, :color, {:prompt => true})
%>
<%= f.submit %>
<% end %>

IN THE ROUTES

root :to => ‘table#index’

NOW when I load the page

http://localhost:3000

I have 2 list menu

{basket}

{apple}

**** jQuery ******

I use Rails 3.1 and this is my Gemfile I have

/////////////////////

source ‘http://rubygems.org’

gem ‘rails’, ‘3.1.0’

gem ‘sqlite3’

Gems used only for assets and not required

in production environments by default.

group :assets do
gem ‘sass-rails’, " ~> 3.1.0"
gem ‘coffee-rails’, “~> 3.1.0”
gem ‘uglifier’
end

gem ‘jquery-rails’

group :test do

Pretty printed test output

gem ‘turn’, :require => false
end
//////////////

in the app/assest/javascript/table.js.coffee I have

jQuery →
apple = $(‘#table_apple’).html()
console.log(apple)
$(‘#table_basket’).change →
basket = $(‘#table_basket :selected’).text()
options = $(apple).filter(“[label=#{basket}]”).html()
console.log(options)
if options
$(‘#table_apple’).html(options)
else
$(‘#table_apple’).empty()

but this script doesn’t work 'cause onchange the first one {basket} the
second one is empty!

I don’t know where’s my mistake

thanks a lot in advance,

C

6

On Mar 27, 2012, at 12:42 PM, bluetwin wrote:

What exactly aren’t you having luck with? Do you need help with the
JQuery conversion?

It sounds like he’s using html() to replace the innards of a select
list, and that doesn’t usually work.

Walter

7

Thanks for the answers,

follow the source web page, I have:

Basket
Please
select

Awesome Normal

Apple
Please
select

Green Red Yellow White

To works I have to pass the right variable in the follow line

options = $(apple).filter("[label=#{basket}]").html()

I think the problem is here: label=#{basket}] that variable gone be 1 o
2 (check out the option=value in menu) this value is function of the Basket choice

well I think its only this the problem in the
app/assest/javascript/table.js.coffee file but I don’t know if it’s only
a
simple syntax error

jQuery ->
apple = $(’#table_apple’).html()
$(’#table_basket’).change ->
basket = $(’#table_basket :selected’).text()
options = $(apple).filter("[label=#{basket}]").html()
if options
$(’#table_apple’).html(options)
else
$(’#table_apple’).empty()

thanks a lot anyway

C

8

On Mar 27, 2012, at 8:46 PM, Cluter V. wrote:

Apple

jQuery ->
apple = $(’#table_apple’).html()
$(’#table_basket’).change ->
basket = $(’#table_basket :selected’).text()
options = $(apple).filter("[label=#{basket}]").html()
if options
$(’#table_apple’).html(options)

You can’t just do this, not unless behind the scenes, jQuery is imputing
that the array is an array of select options, and that the target is a
select, and is magic-ly and silently doing the Right Thing and building
new Option objects and inserting them in the select. Really, I’m not
kidding here, this is not going to work in any or many browsers.

I would love to be wrong about this, but as far as I know, you MUST:

  1. Zero the length of the select object.
  2. One at a time, create a new Option object, assign it the desired
    value and text, and add it to the select’s options array.

After you have done those things, in that order, you will have a working
select with the new options.

I know it doesn’t look cool to have that old-school bare JavaScript
hanging out in your CoffeeScript, but really, needs must.

else
$(’#table_apple’).empty()

thanks a lot anyway

You’re welcome,

Walter

9

thanks for your answer

even if I don’t speak a perfect english I really appreciate your answer
only I hope to understand your effort

thanks a lot again

C