title: Changing state with Ajax call in rails
body: <p>Upon clicking 'complete' on an item, i would like the item to swap down from the pending section to the completed section of my table.  The complete works, but how would i accomplish this feet with ajax / js?  My ajax is all hooked up, I'm just unsure of the javascript required to show the state change, if someone could point me in the right direction. :)</p>
  
  <p>todo_items_controller.rb</p>
  
  <pre><code>def complete
    @todo_item = @todo_list.todo_items.find(params[:id])
    @todo_item.complete!
    respond_to do |format|
      format.html { redirect_to todo_list_todo_items_url }
      format.js
    end
  end
  </code></pre>
  
  <p>index.html.erb</p>
  
  <pre><code>&lt;table id="todo-items"&gt;
    &lt;% if @todo_items.any? %&gt;
      &lt;% @todo_items.pending.each do |item| %&gt;
        &lt;%= render 'todo_items/todo_item', todo_list: @todo_list, item: item %&gt;
      &lt;% end %&gt;
  
    &lt;% if @todo_items.completed.any? %&gt;   
      &lt;tr&gt;&lt;td&gt;&lt;h4&gt;Completed&lt;/h4&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;% @todo_items.completed.each do |item| %&gt;
        &lt;%= render 'todo_items/completed_todo_item', todo_list: @todo_list, item: item %&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
  &lt;% end %&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>_completed_todo_item.html.erb </p>
  
  <pre><code>&lt;tr height="30px"&gt;
    &lt;td&gt;&lt;%= time_ago_in_words(item.completed_at) + ' ago' %&gt;&lt;/td&gt;
    &lt;td&gt;&lt;%= item.content %&gt;&lt;/td&gt;
    &lt;td&gt;&lt;%= link_to 'X', [@todo_list, item], method: :delete, data: { confirm: "Delete?" } %&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>complete.js.erb >> currently just places the completed item at the top of the table</p>
  
  <pre><code>$('#todo-items tr:first').after('&lt;%= j render 'todo_items/completed_todo_item', todo_list: @todo_list, item: @todo_item %&gt;');
  </code></pre>
  
  <p>but how would i move it down to the completed.any? iteration?</p>