# Replace content in a div on prototype observe\_field update?

**URL:** <https://www.ruby-forum.com/t/replace-content-in-a-div-on-prototype-observe-field-update/115157>\
**Category:** Rails\
**Created:** [September 21, 2007, 5:42am UTC](https://www.ruby-forum.com/t/replace-content-in-a-div-on-prototype-observe-field-update/115157 "2007-09-21T05:42:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![athem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/22d042/32.png) [@athem](https://www.ruby-forum.com/u/athem)\
**Post date:** [September 21, 2007, 5:42am UTC](https://www.ruby-forum.com/t/replace-content-in-a-div-on-prototype-observe-field-update/115157/1 "2007-09-21T05:42:36Z")

</div>

For:

\<%= observe\_field :division\_filter\_id,  
:frequency =\> 0.5,  
:update =\> ‘ajaxJobListWrapper’,  
:url =\> {:action =\> ‘update\_job\_list’ },  
:with =\> ‘division\_id’,  
:position =\> :top %\>

where ajaxJobListWrapper is a div and update\_job\_list renders a  
partial, is there any way to REPLACE the current ajaxJobListWrapper  
div content by the content returned by the update\_job\_list action?

The content returned by update\_job\_list as used above places the  
returned content above the existing content. I would like to replace  
it. I’ve tried all of the positions. Any ideas on an approach for  
how to do this?

Thanks.

---

<div class="post-metadata">

**Author:** ![athem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/22d042/32.png) [@athem](https://www.ruby-forum.com/u/athem)\
**Post date:** [September 21, 2007, 12:50pm UTC](https://www.ruby-forum.com/t/replace-content-in-a-div-on-prototype-observe-field-update/115157/2 "2007-09-21T12:50:29Z")

</div>

Hi athem,

athem wrote:

> \<%= observe\_field :division\_filter\_id,  
> :frequency =\> 0.5,  
> :update =\> ‘ajaxJobListWrapper’,  
> :url =\> {:action =\> ‘update\_job\_list’ },  
> :with =\> ‘division\_id’,  
> :position =\> :top %\>
> 
> where ajaxJobListWrapper is a div and update\_job\_list renders a  
> partial, is there any way to REPLACE the current ajaxJobListWrapper  
> div content by the content returned by the update\_job\_list action?

Use page.replace in an RJS template rather than the :update option on  
observe\_field. I highly recommend Cody F.'s PDF on O’Reilly, ‘RJS  
Templates’. Ten bucks well spent.

HTH,  
Bill

---

<div class="post-metadata">

**Author:** ![athem](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/22d042/32.png) [@athem](https://www.ruby-forum.com/u/athem)\
**Post date:** [September 23, 2007, 6:57pm UTC](https://www.ruby-forum.com/t/replace-content-in-a-div-on-prototype-observe-field-update/115157/3 "2007-09-23T18:57:46Z")

</div>

Thanks very much for the tip on Cody F.'s PDF on RJS Templates.  
Using the following in list.rhtml to observe a dropdown listbox:

\<%= observe\_field :division\_filter\_id,  
:frequency =\> 0.5,  
:url =\> {:action =\> ‘update\_job\_list’ },  
:with =\> ‘division\_id’  
%\>

and the div I’m trying to replace (it renders the partial when  
list.rhtml is first displayed)

 \<%= render :partial=\>'job\_listings' %\>

I tried using:

page.replace\_html ‘ajaxJobListWrapper’, :partial =\> ‘job\_listings’

in update\_job\_list.rjs, but had the same problem: the content returned  
from the partial job\_listings appeared is added to the existing  
content (instead of the select filtering the list, when clicked,  
content is added).

When I tried using:

page.replace ‘ajaxJobListWrapper’, :partial =\> ‘job\_listings’

this seems correct (it would seem that the content of the div needs to  
be REPLACED in the DOM), but triggers the following RJS error:

TypeError: Element.replace is not a function

I don’t expect to have my code debugged here, but I’m completely new  
to RJS and thought I might have misunderstood the advice given above.  
Any advice on this error would be appreciated. I need to dig more  
deeply into RJS. Thanks for everyone’s help.