Ajax To-do List

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!

On 3/24/07, John [email protected] 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