# Ajax To-do List

**URL:** <https://www.ruby-forum.com/t/ajax-to-do-list/89968>\
**Category:** Rails\
**Created:** [March 24, 2007, 9:40am UTC](https://www.ruby-forum.com/t/ajax-to-do-list/89968 "2007-03-24T09:40:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![john\_old](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9f8e36/32.png) [@john\_old](https://www.ruby-forum.com/u/john_old)\
**Post date:** [March 24, 2007, 9:40am UTC](https://www.ruby-forum.com/t/ajax-to-do-list/89968/1 "2007-03-24T09:40:32Z")

</div>

Hey there,

I had a question regarding creating an AJAX to-do list (it’s not  
actually a to-do list but for the purposes of simplicity it answers  
the same question).

Essentially, when you add a to-do item, I re-render the partial on the  
page that displays all of the to-do items. Now, the question I had  
was, on the submit button of the form I have it highlight the partial  
once it’s completed its request, which it does. When you add a new to-  
do item, it then highlights all of the to-do items (because that is  
the partial I call to be updated).

But my question is, how do I highlight _only_ the to-do item that I  
just added? I can’t add it in during the form button t o “Add”  
because I don’t know the “id” of the div it will create (which is the  
ID of the to-do item).

Is there a way around this that I haven’t thought of?

Many thanks!

---

<div class="post-metadata">

**Author:** ![john\_old](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/9f8e36/32.png) [@john\_old](https://www.ruby-forum.com/u/john_old)\
**Post date:** [September 25, 2007, 11:08pm UTC](https://www.ruby-forum.com/t/ajax-to-do-list/89968/2 "2007-09-25T23:08:08Z")

</div>

On 3/24/07, John [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> once it’s completed its request, which it does. When you add a new to-  
> do item, it then highlights all of the to-do items (because that is  
> the partial I call to be updated).
> 
> But my question is, how do I highlight _only_ the to-do item that I  
> just added? I can’t add it in during the form button t o “Add”  
> because I don’t know the “id” of the div it will create (which is the  
> ID of the to-do item).
> 
> Is there a way around this that I haven’t thought of?

Use an rjs template.

Instead of using the :update parameter to the call and rendering a  
html partial as the result of your action, create a rjs template like  
so:

page[:the\_is\_of\_the\_list\_element].replace render  
:partial=\>‘your\_old\_partial’  
page[:the\_id\_of\_the\_new\_item].visual\_effect :highlight

That should be all you need.

–max