jquery sortable > nested uls

Question

Hi,

I'm trying to nest several lists inside the main list. Goal is to organize the menu and submenus.

The html:

<ul id="pages_0" class="sortable-list">
  <li id="page_14">home
    <ul id="pages_14" class="sortable-list">
      <li id="page_21">nieuwsarchief</li>
      <li id="page_19">waarom bouwelement</li>
      <li id="page_20">vacatures</li>
    </ul>
  </li>
  <li id="page_23">ondersteuning
    <ul id="pages_23" class="sortable-list">
      <li id="page_24">brochures</li>
      <li id="page_25">constructie</li>
    </ul>
  </li>
  <li id="page_18">producten</li>
  <li id="page_26">contact</li>
  <li id="page_28">referenties</li>
  <li id="page_11">projectaanpak
    <ul id="pages_11" class="sortable-list">
      <li id="page_15">advies</li>
      <li id="page_13">productie</li>
      <li id="page_12">tekenwerk</li>
    </ul>
  </li>
</ul>

Current code:

    $(".sortable-list").sortable({
        update: function() {
            $.post('/pages/order/0/, $('#pages_0').sortable("serialize", {key: 'pages_0[]'}))
        }
    });
    $(".sortable-list").disableSelection(); 

However, when i set this, the var that is being sent is 'pages_0' of course.

So, what I'm trying:

    $('ul.sortable-list').each(function() {
     pid = '';
     pid = $(this).attr('id').split('_');
     pid = pid[1];
     alert(pid);
     $('#pages_'+pid).sortable({
      update: function() {
       $.post('/pages/order/'+pid, $('#pages_'+pid).sortable("serialize", {key: 'pages_'+pid+'[]'}))
      }
     });
     $('#pages_'+pid).disableSelection();
     alert(pid);
    });

However, my problem: in my case: if i use the second jquery, whenever i sort i get '11' (from pages_11, the last ul). I want the id of the parent ul of course. Any ideas on solving this? Thx!

Answer 1

Unless you qualify pid with var it's going to be a global variable and it will have the last value assigned to it for all of the update functions.

Try this:

$('ul.sortable-list').each(function() {
    var pid = $(this).attr('id').split('_')[1];
    alert(pid);
    $('#pages_'+pid).sortable({
        update: function() {
            $.post('/pages/order/'+pid, $('#pages_'+pid).sortable("serialize", {key: 'pages_'+pid+'[]'}))
        }
    });
    $('#pages_'+pid).disableSelection();
    alert(pid);
});