Question

I’m trying to move my list item from one unordered list to another. update.js.erb is called when the update happens ( I can see it being called in the log with no errors).

I’m very new to jQuery so I appologize for my ignorance.

<% if @task.complete? %>
  $('#task_<%= @task.id%> li').detach().appendTo($('#complete_tasks ul'));
  $.('#complete_tasks').sortable_list();
<% else %>
  $('#task_<%= @task.id %> li').detach().appendTo($('#incomplete_tasks ul'));
  $.('#incomplete_tasks').sortable_list();
<% end %>

I saw .detach() in How to move an item from one list to another?

I have tried many different forms but my guess is I’m selecting the list or list item wrong.

Any / all feedback is greatly appreciated ! 🙂

Update 1:

ul id="complete_tasks" data-update-url="http://localhost:3000/tasks/sort_incomplete" class="ui-sortable"
  li class="task" id="task_1"
  ...

And similarly the incomplete_tasks

ul id="incomplete_tasks" data-update-url="http://localhost:3000/tasks/sort_complete" class="ui-sortable"
  li class="task" id="task_7"
  ...

Update 2: Here is what ended up working, I had a different function call after this when I originally tested it that created the issue.

<% if @task.complete? %>
  $('#complete_tasks').append($('#task_<%= @task.id %>'));
<% else %>
  $('#incomplete_tasks').append($('#task_<%= @task.id %>'));
<% end %>

Without the extra $( … ) the function would just print #task_2 so I added that and deleted the bad function call and everything worked great!

Answer 1

You don’t need to detach. If you use appendTo (or append) then it moves the element. It doesn’t create a copy. Also, get rid of the $() in the appendTo – you only need #ID. And you only need the ID to select an element – no need for the tag name and class.