AJAX updating todo list in Rails 3 - ruby-on-rails

Question

I'm trying to convert my todo list app to use AJAX . Here is my update action of TasksController :
class TasksController < ApplicationController
def update
#list= List.find(params[:list_id])
#task=#list.tasks.find(params[:id])
#task.update_attributes(params[:task])
respond_to do |format|
format.html { redirect_to [current_user,#list], notice: 'Task completed' }
format.js
end
end
end
tasks/update.js.erb :
<% if #task.completed? %>
$('#edit_task_<%= #task.id %>').appendTo('#completed_tasks');
<% else %>
$('#edit_task_<%= #task.id %>').appendTo('#incomplete_tasks');
<% end %>
This is my lists/show.html.erb which lists out all tasks for a particular list :
<h3>Unfinished Tasks</h3>
<div class="tasks" id="incomplete_tasks">
<% #list.tasks.incomplete.each do |task| %>
<%= form_for [current_user,#list,task], remote:true do |f| %>
<%= f.check_box :completed %>
<%= f.submit %>
<%= f.label :completed, task.description %>
<% end %>
<% end %>
</div>
<h3>Finished Tasks</h3>
<div class="tasks" id="completed_tasks">
<% #list.tasks.completed.each do |task| %>
<%= form_for [current_user,#list,task], remote: true do |f| %>
<%= f.check_box :completed %>
<%= f.submit %>
<%= f.label :completed, task.description %>
<% end %>
<% end %>
<div class="tasks" id="completed_tasks">
<% #list.tasks.completed.each do |task| %>
<%= form_for [current_user,#list,task], remote: true do |f| %>
<%= f.check_box :completed %>
<%= f.submit %>
<%= f.label :completed, task.description %>
<% end %>
<% end %>
</div>
So, I don't quite understand the tasks/update.js.erb code.
$('#edit_task_').appendTo('#completed_tasks');
In the above code, from which html file are we taking the contents of this div :
Where does that div come from ? Please tell me if my question is unclear ,I'll try and rephrase it . Just to be clear , my code works , but I don't know why ?

Answer 1

Whenever you do a ajax request to your update method in the controller, the tasks get updated and it responds back with data in the format.js. After it responds, the update.js.erb gets called which updates the different elements in the page, from which you sent the ajax request, with the updated tasks.
In you update.js.erb,
<% if #task.completed? %>
$('#edit_task_<%= #task.id %>').appendTo('#completed_tasks');
<% else %>
$('#edit_task_<%= #task.id %>').appendTo('#incomplete_tasks');
<% end %>
there is a #task variable, which is the new task. If the task is completed, then it adds the task to the complete_tasks div - else it appends to the incomplete_tasks div.
Completed Tasks - <div class="tasks" id="completed_tasks">
Incomplete Tasks - <div class="tasks" id="incomplete_tasks">