# AJAX help - proper use of remote\_function

**URL:** <https://discuss.rubyonrails.org/t/ajax-help-proper-use-of-remote-function/34684>\
**Category:** rubyonrails-talk\
**Created:** [September 24, 2008, 6:53am UTC](https://discuss.rubyonrails.org/t/ajax-help-proper-use-of-remote-function/34684 "2008-09-24T06:53:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![blunte](https://avatars.discourse-cdn.com/v4/letter/b/b782af/32.png) [@blunte](https://discuss.rubyonrails.org/u/blunte)\
**Post date:** [September 24, 2008, 6:53am UTC](https://discuss.rubyonrails.org/t/ajax-help-proper-use-of-remote-function/34684/1 "2008-09-24T06:53:21Z")

</div>

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', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:url =\> { :action =\> 'get\_criteria\_options' }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: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

---

<div class="post-metadata">

**Author:** ![Frederick\_Cheung](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/frederick_cheung/32/3901_2.png) [@Frederick\_Cheung](https://discuss.rubyonrails.org/u/Frederick_Cheung)\
**Post date:** [September 24, 2008, 8:04am UTC](https://discuss.rubyonrails.org/t/ajax-help-proper-use-of-remote-function/34684/2 "2008-09-24T08:04:52Z")

</div>

> \<%= remote\_function :update =\> 'crit\_city', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:url =\> { :action =\> 'get\_criteria\_options' }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: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