A place for opinions and notes of a valibuk.

How to observe more fields with AJAX helper

Tagged with: — ondrej at 12:31 am on Tuesday, August 15, 2006

Ruby on RailsThe observe_field AJAX helper allows to observe one field; if there is a change, it calls the specified method on the server side. It is possible to attach one value for the call.

This is enough if we have one text box search for searching over multiple columns or for a full-text search.

For a more complicated filtering functionality with more fields there are two main problems with the observe_field helper:

  • how to specify more parameter values in the observe_field helper.
  • it is necessary to write a observe_field call for each field.

Added: Thanks to Ryan Bate and Benjamin, I found out there is a helper for the whole form: the observe_form helper. Basically my post is useless, except a few situations: if a form contains a lot of items and you would not like to send them all, or, and I am not 100% sure about this, if a form contains a file field (the file_field helper).

Let’s create a special observe_fields helper that will handle all this problems :)

More Parameter Values for observe_field Helper

Imagine a simplified case where we would like to observe two fields: first_name and last_name.

The standard usage of the observe_field helper is not sufficient:

  1. span style=”color:#996600;”>"‘spinner’)",
  2.         :success => "Element.hide(‘spinner’)""‘spinner’)",
  3.         :success => "Element.hide(‘spinner’)",
  4.         :url => {:action => :list},
  5.         :with => last_name %>

This code will observe both fields, but it reckons without a fact, that a call to the server side has to provide both values — the filter functionality does not work correctly.

Well, I found several articles with instructions how to send more parameter values, but they did not work for me. Here is my code (yeah, it works fine):

  1. :with => "’first_name=’+escape($(‘first_name’).value) + ‘&last_name=’ + escape($(‘last_name’).value)"

A new code that works fine:

  1. span style=”color:#996600;”>"‘spinner’)",
  2.         :success => "Element.hide(‘spinner’)",
  3.         :url => {:action => :list},
  4.         :with => "’first_name=’+escape($(‘first_name’).value) + ‘&last_name=’ + escape($(‘last_name’).value)""‘spinner’)",
  5.         :success => "Element.hide(‘spinner’)",
  6.         :url => {:action => :list},
  7.         :with => "’first_name=’+escape($(‘first_name’).value) + ‘&last_name=’ + escape($(‘last_name’).value)" %>

but it is cumbersome. Well, all options can be defined separately, even so you have to write an observe_field call for each field. And to write a value of the :with option for more fields.. phew :)

observe_fields Helper

The observe_fields helper simplifies an observing of more fields. The example with two fields can be written with the new helper as follows:

  1. span style=”color:#996600;”>"‘spinner’)",
  2.         :success => "Element.hide(‘spinner’)",
  3.         :url => {:action => :list} %>

The first parameter is an array of fields that will be observed, the second parameter is a list of options. A value of the :with option is set by the helper (if it is specified, it will be ignored) — it contains values of all observed fields.

All parameters are accessible normally in the list method, that is: @params[:first_name] or @params[:last_name].

The source code of the observe_fields helper:

  1. span style=”color:#008000; font-style:italic;”>#prepare a value of the :with parameter
  2.         with = """’"
  3.                 with += "&""=’+escape($(‘" + field + "’).value)"
  4.                 with += " + "#generate a call of the observer_field helper for each field
  5.         ret = ""

Lines 3-9 contain a code that generates a value of the :with option, because it is the same for all fields. Lines 12-16 contain a code that generates calls of the observe_field helper for each field with the pre-generated value of the :with option.

Added: If you need to handle Unicode characters, you should read how to get a parameter value in a controller from my newer post Observing more fields with AJAX helper and Unicode.


We created a observe_fields helper that extends the existing observe_field helper with a support to observe more fields. The specified method on the server side is called with values of all fields.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • DZone
  • Digg
  • Reddit
  • Technorati
  • Furl
  • NewsVine
  • Slashdot
  • Ma.gnolia
  • StumbleUpon



Comment by Ryan Bates

August 15, 2006 @ 9:43 pm

Why not use observe_form?


Comment by Benjamin

August 16, 2006 @ 10:42 am

In the cae of the form, I think that’s a valid question. Interested in the answer too. – ben @


Comment by ondrej

August 16, 2006 @ 11:08 am

Ehmm.. I am sorry, the reason is very simple — I did not know about it. :)
I will edit this post this evening.
Thanks for your answers! :)

Maybe my helper can be used if a form contains a lot of input elements, so only necessary values are sent.
And how does the observe_form helper behave when a form contains a file field (e.g. the file_field helper)? Is the whole file sent? If yes, my helper can help to reduce the amount of sent data.

Have a nice day :)


Pingback by » Observing more fields with AJAX helper and Unicode

October 2, 2006 @ 11:02 pm

[…] In my post about using the observe_field helper for observing more fields I used the escape method (on the client side). […]

Comment by Vinay

October 13, 2008 @ 11:56 am

after more than two years.. here’s one guy who is thankful that you wrote that helper :). Needed an observe_fields helper that observes only few fields. have not tried it yet though. So dunno if it works yet.

Comment by Vinay

October 13, 2008 @ 12:34 pm

Implemented the code. There was no response at all. Ajax call not going through (development log). How does rails know that observe_fields is meant to be an observer?

Comment by ondrej

November 9, 2008 @ 8:19 pm

The observe_fields helper only generates several (as needed) observe_field sections. The observe_field helper/method is already an observer defined in RoR.

I would first test it with one field (using the standard observe_field method). If this does not work, the problem is probably somewhere else…

Comment by Justin

March 5, 2009 @ 10:31 pm

You saved my life! Observe_form won’t work for what I need, and observe_field needs to send the values of six fields to the controller.


Comment by ChabrellIgan

April 17, 2009 @ 2:42 pm

God dag! Kan jag ladda ner en bild fran din blogg. Av sak med hanvisning till din webbplats!

Comment by Aswini

April 6, 2015 @ 6:55 am

Hi all,I am pretty new to rails.
observe_field is not working in my app. it is showing error like undefined method `observe_field’. Do i need to add any helper for using observe_filed i dont know what is happening.please help in this .
thanks in advance.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comment Preview

commercial break :)

Make an account on -- a really good hosting where you have your own virtual machine. I installed Gentoo there = I like it very much ;)