# Need help 'observe\_field' to work in Safari or Konqueror

**URL:** <https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728>\
**Category:** Rails\
**Created:** [June 7, 2009, 10:28pm UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728 "2009-06-07T22:28:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f4b2a3/32.png) [@jimb](https://www.ruby-forum.com/u/jimb)\
**Post date:** [June 7, 2009, 10:28pm UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728/1 "2009-06-07T22:28:53Z")

</div>

Hi,

I have a form with two drop down menus.  
Depending on what the user selects in the first, the second should be  
populated accordingly.

Here is the code I am using to do this.

View (test.html.erb):  
\<% form\_for :applicant, :url=\> {:action =\> “index”} do |f| %\>

\<%= f.label :topic\_1 %\>  
\<%= f.select :topic\_1, [“a”, “b”, “c”, “d”, “e”, “f”], :include\_blank =\>  
true %\>

\<%= observe\_field “applicant\_topic\_1”, :update =\> “applicant\_member\_1”,  
:with =\> “topic\_1”, :url =\> { :controller =\> “form”, :action =\>  
“get\_members\_1” } %\>

\<%= f.label :member\_1 %\>  
\<%= f.select :member\_1, [“Please select topic 1 first”] %\>

* * *

Controller:  
def get\_members\_1  
@members\_1 = Member.find\_all\_by\_topic params[:topic\_1]  
end

* * *

View (get\_members\_1.html.erb):

This is no. 1 (I have shortened this for sake of simplicity. Normally a lookup of all members would take place here)

As you can see, when the user enters something in ‘topic\_1’ the  
observe\_field helper calls the method ‘get\_members\_1’ in the controller,  
and updates the field ‘member\_1’ dynamically.

Here is this example in action: [http://localhost:3000/test](http://localhost:3000/test)

My problem is that this works fine in FF, IE, Chrome and Opera, but it  
doesn’t work at all in Konqueror.

I have Googled the problem and come up empty handed.

This is the java script that the helper generates:

\<![CDATA[new Form.Element.EventObserver('applicant\_topic\_1', function(element, value) {new Ajax.Updater('applicant\_member\_1', '/test/get\_members\_1', {asynchronous:true, evalScripts:true, parameters:'topic\_1=' + encodeURIComponent(value) + '&authenticity\_token=' + encodeURIComponent('EWNBpyzHQtObzxZbuXqg2s0tUHw8JWJhaeKZiyvWO9E=')})}) //]]\> \<p\>Can anybody point me in the right direction to sort this out?\<br\> I am relatively ok at ruby / rails, but a beginner regarding java script\<br\> / ajax.\</p\> \<p\>I also had a look on the rails doc page regarding observe\_field, but I\<br\> cannot see what I am doing wrong.\</p\> \<p\>I would be grateful for any help.\</p\>

---

<div class="post-metadata">

**Author:** ![jimb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f4b2a3/32.png) [@jimb](https://www.ruby-forum.com/u/jimb)\
**Post date:** [June 7, 2009, 10:30pm UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728/2 "2009-06-07T22:30:07Z")

</div>

That’ll teach me to re-read things before I post.  
The URL is: [http://igsn-application.de/test/](http://igsn-application.de/test/)  
Sorry!

---

<div class="post-metadata">

**Author:** ![jimb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f4b2a3/32.png) [@jimb](https://www.ruby-forum.com/u/jimb)\
**Post date:** [June 8, 2009, 9:35am UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728/3 "2009-06-08T09:35:10Z")

</div>

Konquerer isn’t officially supported by Prototype.js which Rails uses  
for it’s Ajax stuff.

The latest version of Prototype is compatible with the following  
browsers:  
Browser Version(s)  
Mozilla Firefox ≥ 1.5  
Microsoft Internet Explorer ≥ 6.0  
Apple Safari ≥ 2.0  
Opera ≥ 9.25

There should be no issue with Safari 3 or 2.

On Jun 8, 1:30Â am, Jim B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![jimb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f4b2a3/32.png) [@jimb](https://www.ruby-forum.com/u/jimb)\
**Post date:** [June 9, 2009, 2:05pm UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728/4 "2009-06-09T14:05:45Z")

</div>

After a couple of days of tearing my hair out I have solved the problem  
another way. I have ditched the use of the ‘observe\_field’ helpers and  
written the routine from scratch in java script.

Now it works in all of these browsers.

If anyone else stumbles accross this thread, I was greatly helped by  
this howto:

> **[Using a menu to write a menu](https://www.trans4mind.com/personal_development/JavaScript/menuWrite.htm)**
>
> Using a select to write a select (Double menus)

---

<div class="post-metadata">

**Author:** ![jimb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f4b2a3/32.png) [@jimb](https://www.ruby-forum.com/u/jimb)\
**Post date:** [June 8, 2009, 1:48pm UTC](https://www.ruby-forum.com/t/need-help-observe-field-to-work-in-safari-or-konqueror/169728/5 "2009-06-08T13:48:51Z")

</div>

Hi,

Thanks for replying

> Konquerer isn’t officially supported by Prototype.js which Rails uses  
> for it’s Ajax stuff.

That’s not so bad. Konqueror I can live without (although it’s not  
perfect)

> There should be no issue with Safari 3 or 2.

I am running Safari 4 public beta on Windows and the script  
([http://igsn-application.de](http://igsn-application.de)) doesn’t work in this browser.  
It also doesn’t work on Chrome 2.0.172.30.

It does however, work fine in FFox, IE and Opera.

What the browsers in which it doesn’t work have in common is that they  
are built on KHTML or Webkit (a fork of KHTML). Might this have  
something to do with it?

I tried debugging the webpage with Safari’s java script debugger. I get  
no errors, one warning and the following output:

Warning. Resource interpreted as script but transferred with MIME type  
text/html.(index.js)  
XHR finished loading: “[http://igsn-application.de/test/get\_members\_1](http://igsn-application.de/test/get_members_1)”  
prototype.js (line 1437).

It seems to me that the script is fetching the html to display in the  
drop down box, but not displaying it for some reason. Or maybe rendering  
it off of the page??

I have also updated prototype to the latest version (1.6.1\_rc2)

Can anyone give me a hint as to what I am doing wrong or where I could  
start looking to solve this problem (all Google searches so far came up  
blank).

Thanks for your time.