title: jQuery nestedSortable, save order to Database
body: <p>I'm using a plugin called <code>nestedSortable</code> to sort the order of the list, with nested (<code>ul li</code>) to the Database mySQL.</p>
  
  <p>However, I can't save the order when changed with this plugin. I previously used the sortable plugin, which does save the order to the database when changed, but doesn't have a nested option.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div id="dnp"&gt;
      &lt;ul id="sort" class="list-group"&gt;
          &lt;?php
          try
          {
              $conn = new PDO('mysql:dbname=uwv;host=localhost', 'root', '');
              $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
              $sqlString = "SELECT * FROM uwv_test1 ORDER BY Question_Order;";
  
              $stmt = $conn-&gt;query($sqlString);
              $stmt-&gt;execute();
  
              while($row = $stmt-&gt;fetch(PDO::FETCH_ASSOC))
              {
                  echo    "&lt;li id='id_" . $row['QuestionID'] . "' class='list-group-item space'&gt;&lt;i class='fa fa-bars fa-lg'&gt;&lt;/i&gt;&amp;nbsp;"
                              . "&lt;a href='#'&gt;" . $row['Question'] . "&lt;/a&gt;/li&gt;";
  
              }
          }
          catch(PDOException $e)
          {
              echo $connection-&gt;errorCode();
              echo $connection-&gt;errorInfo();
          }
          ?&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery code:</p>
  
  <pre><code>$(document).ready(function()
  {
  $('#sort').nestedSortable({
      helper: fixHelper,
      handle: '.fa',
      containment: 'document',
      tolerance: 'move',
      cursor: 'move',
      revert: 'true',
      placeholder: 'placeholder',
      connectWith: 'ul#sort, ul ul#sort, #sort',
      update: function(){
          var order = $('#sort').nestedSortable('serialize');
          $.ajax({
              type: "GET",
              dataType: "JSON",
              url: "process-sorting.php",
              data: order
          });
          //$('#info').load("process-sorting.php?"+order);
      }
  }).disableSelection();
  
  // Return a helper with preserved width of cells
  var fixHelper = function(e, ui) 
  {
      ui.children().each(function() 
      {
          $(this).width($(this).width());
      });
      return ui;
  };
  });
  </code></pre>
  
  <p>PHP code:</p>
  
  <pre><code>$ids = $_GET['id'];
  $display_order = 1;
  
  foreach($ids as $id)
  {
  $db = new PDO('mysql:dbname=uwv;host=localhost', 'root', '');
  $stmt = $db-&gt;prepare("UPDATE uwv_test1 SET Question_Order = :display_order WHERE QuestionID = :id");
  $stmt-&gt;bindParam(':id', $id);
  $stmt-&gt;bindParam(':display_order', $display_order);
  $stmt-&gt;execute();
  
  $display_order++;
  }
  </code></pre>
  
  <p>Whenever I use the plugin jQuery sortable, I have no problems with saving the changed order to the Database:</p>
  
  <pre><code>$('#sort').sortable({
      helper: fixHelper,
      handle: '.fa',
      containment: 'document',
      tolerance: 'move',
      cursor: 'move',
      revert: 'true',
      placeholder: 'placeholder',
      connectWith: 'ul#sort, ul ul#sort, #sort',
      update: function(){
          var order = $('#sort').sortable('serialize');
          $.ajax({
              type: "GET",
              dataType: "JSON",
              url: "process-sorting.php",
              data: order
          });
          //$('#info').load("process-sorting.php?"+order);
      }
  }).disableSelection();
  </code></pre>
  
  <p>Could anyone help me with this? I'm not good at explaining things, so sorry if it's not well explained.</p>