Rails - Jun 2005 - Ajax: observe_field

So, I''m trying to get on the Ajax train here.  

I have a form with, among other things, 2 different select boxes.  The
first select box is a list of authors (whose select value is their
id).  The second drop box is going to be the books for the given
author... so the contents of the second box depend on what is selected
in the first.

I am trying to use the observe_field helper to watch the author field,
and update the book select box based on what is selected.  Following
the documentation on
http://rails.rubyonrails.com/classes/ActionView/Helpers/JavascriptHelper.html,
my rhtml looks something like this:

<FORM METHOD="POST" name="review_form"
id="review_form"
ACTION="/reviews/create">
<%= observe_field( "author_id", { :update =>
"book_select", :frequency
=> 3, :url => { :action => "book_select" } } ) %>
<select NAME="author_id" >
    <%= options_from_collection_for_select( @authors, "id",
"name" ) %>
</select>

<div id="book_select">
    <select disabled NAME="book[id]">You Must Choose an Author
First
</div>

The contents of the rhtml for the action ajax is calling ( :action =>
"book_select" } are:

<select NAME="book[id]" size=1>
    <OPTION SELECTED value="-1"> Choose a Book
    <% for book in @books %>
        <OPTION value="<%= book.id %>"> <%= book.title
%>
    <% end %>
</select>

Where I of course define the instance variable @books in my
book_select action in the controller.

However, when I load the page (Firefox, WinXP), I get a javascript error:

"Error: Form is not defined" 

The generated JS looks like this:

<script type="text/javascript">new
Form.Element.Observer(''author_id'',
3, function(element, value) {new Ajax.Updater(''book_select'',
''/reviews/book_select'', {parameters:value,
asynchronous:true})})</script>

I''m at a loss.  Any suggestions?  Thanks!

Matt

p.s. I am running on Rails 0.12.1

> "Error: Form is not defined"
So I figured out that my observe_field has to be *after* the field is
defined... so I went ahead and did that, but I am getting a new error:

"Error: Element has no properties
Sourcefile: http://myurl/javascripts/prototype.js    Line 349"

Which is this:

getValue: function(element) {
    element = $(element);
>>>    var method = element.tagName.toLowerCase(); <<<
    var parameter = Form.Element.Serializers[method](element);
    
    if (parameter) 
      return parameter[1];
  }

Anyone know what I''m doing wrong here?

Matt

You need to give your <input> tag an ''id'' attribute.
Otherwise, observe_field won''t find it.

Am 03.06.2005 um 20:56 schrieb Belorion:
>> "Error: Form is not defined"
>>
>
> So I figured out that my observe_field has to be *after* the field is
> defined... so I went ahead and did that, but I am getting a new error:
>
> "Error: Element has no properties
> Sourcefile: http://myurl/javascripts/prototype.js    Line 349"
>
> Which is this:
>
> getValue: function(element) {
>     element = $(element);
>
>>>>    var method = element.tagName.toLowerCase(); <<<
>>>>
>     var parameter = Form.Element.Serializers[method](element);
>
>     if (parameter)
>       return parameter[1];
>   }
>
> Anyone know what I''m doing wrong here?
>
> Matt
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>