jquery sortable?

Question

So I am wondering why if I have a nested list such as

<ul id="categories">
  <li> <span class="categoriesSort">[Move]</span>Category
    <ul id="tasks">
      <li><span class="handle">[Move]</span>Task</li>
      <li><span class="handle">[Move]</span>Task</li>
    </ul>
  </li>
  <li> <span class="categoriesHandle">[Move]</span>Category
    <ul id="tasks">
      <li><span class="handle">[Move]</span>Task</li>
      <li><span class="handle">[Move]</span>Task</li>
    </ul>
  </li>
</ul>

the second category MUST be on top in order for its tasks to be editable.....I can move both categories around. but one must be on top. now if I move the second categories to the top of the list and edit its tasks, I can then drag it to the bottom and continue editing the tasks list, but if i refresh the page then those tasks are no longer editable.

code

 jQuery(function() {
    return $('#categories').sortable({
      axis: 'y',
      handle: '.categoriesSort',
      update: function() {
        return $.post($(this).data('update-url'), $(this).sortable('serialize'));
      }
    });
  });

  jQuery(function() {
    return $('#tasks').sortable({
      axis: 'y',
      handle: '.handle',
      update: function() {
        return $.post($(this).data('update-url'), $(this).sortable('serialize'));
      }
    });
  });

any thoughts? - the ajax requests work fine. its just unless the second categories is on top I cannot sort it's tasks.

Answer 1

Your issue is because you are reusing ID values for the UL #tasks.

You cannot duplicate ID's in a document. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

one of the reasons you are seeing: js and css will only evaluate the first element it finds with that ID value and not all of them. This is what classes are for.

http://jsfiddle.net/rlemon/xYGsA/ here is an example changing the ID's to classes.