# Problem trying to update multiple \<DIV\> elements with AJAX

**URL:** <https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312>\
**Category:** Rails\
**Created:** [June 14, 2006, 4:14am UTC](https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312 "2006-06-14T04:14:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_R.schild](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/bc8723/32.png) [@Adam\_R.schild](https://www.ruby-forum.com/u/Adam_R.schild)\
**Post date:** [June 14, 2006, 4:14am UTC](https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312/1 "2006-06-14T04:14:31Z")

</div>

I’ve been trying for days now to figure this out on my own, but I can’t,  
so this is my cry for help. Here’s my situation: I need to update  
multiple

 elements on a page, each with its own HTML, but I just  
can’t figure out how to get it to work. That is, I want to replace  
everything within each 
 element with something new. When I try what  
I have, nothing changes in the browser. The (what I think are the)  
relevant code snippets are as follows:

Calling view:  
\<%= form\_remote\_tag(:url =\> {:action =\> ‘create\_problem’},  
:complete=\>evaluate\_remote\_response) %\>

Controller action:  
@choices = get\_prob\_list\_choices  
render(:layout=\>false)

Returning view:  
\<% update\_element\_function(“new\_prob”, :binding=\>binding) do %\>  
\<%=render(:partial=\>“new\_prob”)%\>  
\<%end%\>  
\<% update\_element\_function(“prob\_list”, :binding=\>binding) do %\>  
\<%=render(:partial=\>“prob\_list”, :locals=\>{:choices=\>@choices})%\>  
\<%end%\>

I’ve also tried it with the returning view as follows, also to no avail:

\<%= update\_element\_function(“new\_prob”,  
:content=\>render(:partial=\>“new\_prob”) %\>  
\<%= update\_element\_function(“prob\_list”,  
:content=\>render(:partial=\>“prob\_list”,  
:locals=\>{:choices=\>@choices})) %\>

I will be so grateful for help solving this problem.

---

<div class="post-metadata">

**Author:** ![Adam\_R.schild](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/bc8723/32.png) [@Adam\_R.schild](https://www.ruby-forum.com/u/Adam_R.schild)\
**Post date:** [June 14, 2006, 1:51pm UTC](https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312/2 "2006-06-14T13:51:40Z")

</div>

Look into RJS templates - the code you are trying to write has already  
been written.

Here’s a good intro:  
[http://www.codyfauser.com/articles/2005/11/20/rails-rjs-templates](http://www.codyfauser.com/articles/2005/11/20/rails-rjs-templates)

Cheers!

-David F.

---

<div class="post-metadata">

**Author:** ![Adam\_R.schild](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/bc8723/32.png) [@Adam\_R.schild](https://www.ruby-forum.com/u/Adam_R.schild)\
**Post date:** [June 15, 2006, 1:42am UTC](https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312/3 "2006-06-15T01:42:16Z")

</div>

Hi.

You need RJS!

Check out Cody F.'s article or his new PDF ebook (just released  
yesterday).

But the short of it is:

Your calling html:  
\<%= link\_to\_remote “click me”, :url =\> {:controller =\> ‘mycontroller’,  
:action =\> ‘update’, :id =\> object.id} %\>

your controller:

def update  
# do something if params[:id] if you need to  
# some other logic…  
# such as @object = Object.find\_by\_id(params[:id])

```
  render :update do |page|
     # replace the html inside the element with the <h2>...</h2> 

```

html  
page.replace\_html “div\_id\_1”, “

## My new html
”

```
     # replaces html inside element with the partial _newform.rhtml
     page.replace_html "div_id_2", :partial => "newform", :object => 

```

@object

```
     # inserts more html into the element at the end
     page.insert_html :bottom, "div_id_3", "add some text at the 

```

end…"

```
     # does the highlight effect
     page.visual_effect :highlight, "div_id_4", :duration => 2
  end

```

end

or you can put the code inside the render block in a update.rjs file  
in the same directory as your other .rhtml files for that controller.

Anyways, check out Cody’s book or article.

John.

Adam R.schild wrote:

> I’ve been trying for days now to figure this out on my own, but I can’t,  
> so this is my cry for help. Here’s my situation: I need to update  
> multiple
> 
> elements on a page, each with its own HTML, but I just  
> can’t figure out how to get it to work. That is, I want to replace  
> everything within each 
> element with something new. When I try what  
> I have, nothing changes in the browser. The (what I think are the)  
> relevant code snippets are as follows:
> 
> Calling view:  
> \<%= form\_remote\_tag(:url =\> {:action =\> ‘create\_problem’},  
> :complete=\>evaluate\_remote\_response) %\>
> 
> Controller action:  
> @choices = get\_prob\_list\_choices  
> render(:layout=\>false)
> 
> Returning view:  
> \<% update\_element\_function(“new\_prob”, :binding=\>binding) do %\>  
> \<%=render(:partial=\>“new\_prob”)%\>  
> \<%end%\>  
> \<% update\_element\_function(“prob\_list”, :binding=\>binding) do %\>  
> \<%=render(:partial=\>“prob\_list”, :locals=\>{:choices=\>@choices})%\>  
> \<%end%\>
> 
> I’ve also tried it with the returning view as follows, also to no avail:
> 
> \<%= update\_element\_function(“new\_prob”,  
> :content=\>render(:partial=\>“new\_prob”) %\>  
> \<%= update\_element\_function(“prob\_list”,  
> :content=\>render(:partial=\>“prob\_list”,  
> :locals=\>{:choices=\>@choices})) %\>
> 
> I will be so grateful for help solving this problem.

---

<div class="post-metadata">

**Author:** ![Adam\_R.schild](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/bc8723/32.png) [@Adam\_R.schild](https://www.ruby-forum.com/u/Adam_R.schild)\
**Post date:** [June 15, 2006, 5:27am UTC](https://www.ruby-forum.com/t/problem-trying-to-update-multiple-div-elements-with-ajax/63312/4 "2006-06-15T05:27:55Z")

</div>

Thanks to both of you for the excellent suggestion. I hooked myself up  
with RJS, and it is, indeed, fantastic! So much cleaner and simpler.  
Thanks again.