Topic: dynamic select menu for a registration form

Hi,

I want a dynamic select menu (I use Rails 3.1 and jQuery 1.7)

in the a registration form I want for the user a choice for the country in fuction of the continent

SO a people from USA choose America from a list menu and after appear a list in another list menu of the american countries

but I want use jQuery and in my case it doesn't works follow all my steps

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

I CREATE the MODELS

$ rails generate model continent name:string
$ rails generate model country name:string continent_id:integer
$ rails generate model user continent:string country: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 = Continent.create(:shape => "America")
    g2 = Continent.create(:shape => "Asia")

    a1 = Country.create(:color => "USA", :continent_id => g1.id)
    a2 = Conuntry.create(:color => "MEXICO", :continent_id => g1.id)
    a3 = Country.create(:color => "CHINA", :continent_id => g2.id)
    a4 = Country.create(:color => "JAPAN", :continent_id => g2.id)

  end

  def self.down
# you can fill this in if you want.
  end
end

MODELS

I have 3 model @user, @continent, @country

class country
    belongs_to :users
    belongs_to: continents
end

class  continent
    belongs_to :users
    has_many :countrys
end

class user
    has_many :continents
    has_many :countrys
end

CONTROLLER

in the @user controller I have

def index
    @continent  = continent.find(:all)
    @country = country.find(:all)
    @user = user.new
  end

VIEWS

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

<%= form_for @user do |f| %>
<%= f.collection_select(:continent, @continent, :id, :name, {:prompt =>true})
%>
<%= f.collection_select(:country, @country, :continent_id, :name, {:prompt => true})
%>
<%= f.submit %>
<% end %>

IN THE ROUTES

root :to => 'user#index'

NOW when I load the page

http://localhost:3000

I have 2 list menu

{continent}

{country}

**** 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/user.js.coffee I have

jQuery ->
  country = $('#user_country').html()
  $('#user_continent').change ->
    continent = $('#user_continent :selected').text()
    options = $(country).filter("[label=#{continent}]").html()
    if options
      $('#user_country').html(options)
    else
      $('#user_country').empty()

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

I don't know where's my mistake I guess that the follow line

options = $(country).filter("[label=#{continent}]").html()

is empty

thanks a lot in advance,

C

Last edited by Cluter (2012-03-29 00:20:12)

Re: dynamic select menu for a registration form

options = $('#country').filter("[label=#{continent}]").html()

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: dynamic select menu for a registration form

hi,

thanks

but your line doens't work ...

Last edited by Cluter (2012-04-08 01:17:05)

Re: dynamic select menu for a registration form

Sorry,  didn't look close enough at what you were doing,  I think you need to put some quotes around the value, i.e.


options = $(country).filter("[label='#{continent}']").html()

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: dynamic select menu for a registration form

Should the filter be on value rather than label? so something like:

options = $(country).filter("[value=#{continent}]")

Last edited by aysh (2012-04-11 02:29:16)