Automatically populating list box items using Ajax

Rails
1

I have page where I have 2 list box , one for countries and one for
states.

and I have tables for country and state.

What I want is when I click on any country name , in the next list box
it should display all the states in that particular country. I have an
idea but dont know how to do with Ajax. Would be great if any one can
come up with some example.

Thanks in advance

2

On Jul 11, 1:34 am, Unni K. [email protected]
wrote:

Thanks in advance

–

can you read Portuguese? I can’t

http://eustaquiorangel.com/blog/show/367
http://groups.google.com/group/rubyonrails-talk/browse_frm/thread/581d86e2a4b359c2?q=drop+down&

3

no, i cant read .

4

no, i cant read .

Babelfish to the rescue! Good luck reading its output!

Rails: Modifying the OPTIONs of the SELECTs
Publicado/atualizado in 09/03/2007 12:37
Yesterday she was giving a hand to the night for my wife, who is to
webdesigner and is learning to program now, guess, with Rails (and they
guess who is the support-technician-officer-24-hours-VIP of it, tô
ferrado) and yesterday it had one probleminha to fill some SELECTs. I go
to describe a situation similar to the one that it had:

a… I have 3 SELECTs, one for country, another one for state and
another one for city;
b… The logical sequência is all there: the country is selected, the
SELECT of the state is filled, the state is selected, and the cities are
filled;
c… I used observe_field for country and state, indicating the
corresponding controllers and actions;
Until there, all good, but probleminhas had appeared ones:

a… I gave a good one searched and I did not find a way to only modify
the OPTIONs of the SELECT, what the group walks recommending is or to
use replace_html and to change to everything of the element where the
SELECT if finds, (in this in case that I found that the layout went to
complicate a little) or to use replace to change the proper element, or
either, to create a new SELECT with this method.
b… With any one of the options above, observe_field was maluco. He is
not for less, we remove and we insert the element that it was
“watching”, and it stops to look the cities of the state at the moment
that we remove and we insert the element of state with the values
returned for the consultation for country.
I go to try to illustrate a little the problem and the solution with
code (where I only joined everything in a place only for didactic ends,
they separate to its controllers certinho). I generated a controller
general pool with the actions (methods, dã) states, cities and new, and
a mount of hashes and arrays to make a simulation of data come of the
data base.

The play that I made was to use the method call, that called a function
Javascript in the page that requested call AJAX. This function (nastily
inserted there inside of the action, for effect of the example - they
will be to use place it in an archive js) receives id from the SELECT
that we want to bring up to date and the Array with the data to be
inserted, makes a “clean one” in the bred new SELECT and adds the
OPTIONs from the values of the sent Array. The controller is thus:

class GeralController < ApplicationController
def estados
@paises_estados = {1=>[ [ ’ SP’, 1], [‘mg’, 2]], 2=>[[‘j1’, 3],
[‘j2’, 4 ] ],
3=>[[‘C1’, 5], [‘c2’, 6 ] ]} to relieve:update of |page|
page.call ’ fill ', ’ states ',
@paises_estados[params[:id].to_i ] page.call ’ fill ', ’ cities ', [ ]
end end def cities @estados_cidades = {1=>[[‘Mirassol’, 1], [‘Rio
Preto’, 2 ] ], 2=>[[‘Belo Horizonte’, 3], [‘Divinópolis’, 4]],
3=>[[‘Tokio’, 5 ] ], 4=>[[‘Osaka’, 6]], 5=>[[‘Alberta’, 5]],
6=>[[‘Vancouver’, 6 ] ]} to relieve:update of |page| page.call ’
fill ', ’ cities ‘,
@estados_cidades[params[:id].to_i ] end end def new @paises = [ [ ’
Brasil’, 1], [‘Japão’, 2], [‘Canadá’, 3 ] ] end end
There in the controller all time has a play to send an empty Array of
cities that are returned new states, preventing the inconsistency to be
with the selected cities previously filled. E view new, already with the
function fill, is thus:

< script type=“text/javascript” > function fill(id,
val){to var select = $(id); to var length = select.length;
to for(var i=0; i<length; i++) select.remove(0);
if(val.lenght<=0) return;
select.appendChild(document.createElement(“option”));
val.each(function(opt){to var option =
document.createElement(“option”); option.text = opt[0 ];
option.value = opt[1 ]; select.appendChild(option);
})} < form > < p > < label
for=“paises”>PaÃ-ses < select id=“paises” > < option></option

< % = options_for_select(@paises) % >

< p > < label
for=“estados”>Estados < select id=“estados” > </p
< p > < label for=“cidades”>Cidades < select id=“cidades” >

< p id=“status”>

< % = observe_field ’ paises
',:url=>{:action=>'estados '},:with=>'id ’ % > < % = observe_field ’
states ',:url=>{:action=>'cidades '},:with=>'id ’ % >
I looked for in Prototype and vi much thing not to deal myself with
SELECTs, there therefore I made some things half “in the nail” in the
function, as to erase the elements and to create the OPTIONs, if
somebody to know a direct skill in the Prototype sends me an email that
I bring up to date the code. He was very late yesterday and I was not
with bag to be fuçando excessively in the API of the Prototype not
(although to have sufficiently improved, still he is having a search, he
has much thing there).

With this solution I prevented to be removing and inserting the SELECT
that I want popular and preventing any problems related to the this.

–
Phlip
Test Driven Ajax (on Rails) [Book]
“Test Driven Ajax (on Rails)”
assert_xpath, assert_javascript, & assert_ajax

5

On Jul 11, 2:12 am, “Phlip” [email protected] wrote:

c… I used observe_field for country and state, indicating the corresponding controllers and actions;
@paises_estados = {1=>[ [ ’ SP’, 1], [‘mg’, 2]], 2=>[[‘j1’, 3], [‘j2’, 4 ] ],
< script type=“text/javascript” > function fill(id,
for=“estados”>Estados < select id=“estados” >

< p > < label for=“cidades”>Cidades < select id=“cidades” >
Test Driven Ajax (on Rails) [Book]
“Test Driven Ajax (on Rails)”
assert_xpath, assert_javascript, & assert_ajax

Huh, that’s pretty comprehensible, actually. OK, here’s some in
Ingrish, the only language i can speak/writ

http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/

http://www.roryhansen.ca/?p=9

6

On Wed, 2007-07-11 at 10:34 +0200, Unni K. wrote:

Thanks in advance

I wrote a JavaScript a few days ago which should work for this:

http://piano.altipla.no/pages/form_helper

–
Tore D.
[email protected]
Trondheim, NO
http://tore.darell.no/

7

Huh, that’s pretty comprehensible, actually.

I need to make some English versions of some posts. :slight_smile: