Question

I have a list that is being retrieved from the database.
The number of list is undefined since they are coming from the database.
These list can be dragged to other lists.
here is the code

<?php while(..condition..){ ?>
<ul id="test-list-sub<?=$x?>" class="connectedSortable2" style="padding-bottom:10px;">
  <li id="listItemSub_<?=$row['id']?>">
    <table>...content here...</table>
  </li>
</ul>
<?php $x++; } //end while ?>

Javascript

for(var y=0; y<<?=$x?>; y++){

    $("#test-list-sub"+y).sortable({
      handle : '.handle',
      connectWith: ".connectedSortable2",
      update : function () {
          var order = $("#test-list-sub"+y).sortable('serialize');
          alert(order);
        //$("#info2").load("process-sortable.php?"+order+"&panel=2");
      }
    });

}

This process works but the problem is when i try to get the list items i get
[Object][object] but when i try to change the

var order = $("#test-list-sub"+y).sortable('serialize');

to

var order = $("#test-list-sub0").sortable('serialize'); //or any number 0-number of lists

I get the value. It seems that the ‘value y’ being passed in the ‘update’ part of sortable is the last value of y. What should i do to get the value from the list?

Answer 1

Found the answer

$('.connectedSortable2').each(function() {
        var pid = $(this).attr('id').split('_')[1];
        $("#test-list-sub_"+pid).sortable({
          handle : '.handle',
          connectWith: ".connectedSortable2",
          update : function () {
              var order = $("#test-list-sub_"+pid).sortable('serialize');
              alert(order);
            //$("#info2").load("process-sortable.php?"+order+"&panel=2");
          }
        });
    });

I used the each function to get them. Since they are having the same class.
Answer is from jquery sortable > nested uls