jQuery UI: sortable('toArray') returns an empty array

Question

This has me stumped. The follow code returns ",,,,,,":

<script type="text/javascript">
$(function() {
 $('#listB').sortable({
  connectWith: '#listA',
  update: function(event, ui) {
   var result = $(this).sortable('toArray');
   alert(result);
   }
 });
 $('#listA').sortable({
  connectWith: '#listB'
 });
});
</script>

<div id="boxA">
 <ul id="listA" class="myList">
  <li value="1">Item A</li>
  <li value="2">Item B</li>
  <li value="3">Item C</li>
  <li value="4">Item D</li>
  <li value="5">Item E</li>
  <li value="6">Item F</li>
  <li value="7">Item G</li>
 </ul>
</div>

<div id="boxB">
 <ul id="listB" class="myList">
  <li value="1">Item A</li>
  <li value="2">Item B</li>
  <li value="3">Item C</li>
  <li value="4">Item D</li>
  <li value="5">Item E</li>
  <li value="6">Item F</li>
  <li value="7">Item G</li>
 </ul>
</div>

Why?! It's driving me insane! Any suggestions?

Answer 1

.sortable('toArray') serializes items Ids into array, and your items have no Ids, that's why you have empty strings.