AJAX help - proper use of remote_function

Hi.

I'm having a hard time understanding how to use remote_function().

Here's what I want to do:

I have two divs. The one on the left lists criteria names. When the user clicks on one of the entries in the listbox on the left, I want to make a remote call to the server to populate the right div based on several things: the name of the criteria on the left, and a serialized list of the names+selections of the other criteria.

For example, assume the left list is like this:

Continent Country State City

When the user clicks on Continent, I should send a request to the server like /reports/get_criteria_options

The result will go into a hidden div called crit_continent. It will hold a series of checkboxes and text labels.

The more complicated case is when the user clicks City. I want it to send a request like this - /get_criteria_options? list=city&continent=1,3,4&country=2

I can manually (JavaScript) create the query string, but that may not even be necessary given the power of Prototype. In any case, part of my confusion is knowing how to even define the remote_function call from within my template.

Here's what I have right now, as an example (and it doesn't work right)

<%= remote_function :update => 'crit_city',                                    :url => { :action => 'get_criteria_options' },                                    :with => "$H({list: $F('crit_city'), country: $F('crit_country'), state: $F('crit_state')}).toQueryString()" %>

Unfortunately that results in an error (according to Firebug): Form.Element.Serializers[method] is not a function

Googling that error, I see comments about duplicate IDs. I don't think I have dup ids...

I'm very interested in any help or comprehensive non-trivial examples. Barring that, I may be open to short-term actual help for pay.

Thanks much! Michael

<%= remote_function :update => 'crit_city',                                   :url => { :action => 'get_criteria_options' },                                   :with => "$H({list: $F('crit_city'), country: $F('crit_country'), state: $F('crit_state')}).toQueryString()" %>

Unfortunately that results in an error (according to Firebug): Form.Element.Serializers[method] is not a function

Probably means that one of those 3 elements (crit_city etc...) is not
an input element (or something similar like a select or a textarea). It certainly seems suspicious to me that the thing you are updating
('crit_city') has the same id as something you are submitting, as you
had said previously that the point of the exercise was to populate a
div (which implies that that is what the element with id crit_city is)

Fred