title: jQuery Connected Sortable Lists, Save Order to MySQL
body: <p>Hoping that using something like this demo it is possible to drag items within and between two columns, and update their order either live or with a "save" button to MySQL. Point being that you can make changes and return to the page later to view or update your ordering.</p>
  
  <p><a href="http://pilotmade.com/examples/draggable/" rel="noreferrer">http://pilotmade.com/examples/draggable/</a></p>
  
  <p>Doing it for just one column is fine, but when I try to pass the order of both columns, the issue seems to be passing multiple serialized arrays with jQuery to a PHP/MySQL update script.</p>
  
  <p>Any insight would be much appreciated.</p>
  
  <p>If you look below, I want to pass say...</p>
  
  <p>sortable1<br />entry_1 => 0<br />entry_5 => 1</p>
  
  <p>sortable2<br />entry_3 => 0<br />entry_2 => 1<br />entry_4 => 2</p>
  
  <p>EDIT: This ended up doing the trick</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ol id="sortable1"&gt;&lt;li id="entry_####"&gt;blah&lt;/li&gt;&lt;/ol&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() 
  {
      $("#sortable1, #sortable2").sortable(
      {
          connectWith: '.connectedSortable',
          update : function () 
          { 
              $.ajax(
              {
                  type: "POST",
                  url: "phpscript",
                  data: 
                  {
                      sort1:$("#sortable1").sortable('serialize'),
                      sort2:$("#sortable2").sortable('serialize')
                  },
                  success: function(html)
                  {
                      $('.success').fadeIn(500);
                      $('.success').fadeOut(500);
                  }
              });
          } 
      }).disableSelection();
  });
  </code></pre>
  
  <p></p>
  
  <p>This is the PHP query</p>
  
  <pre><code>parse_str($_REQUEST['sort1'], $sort1);
  foreach($sort1['entry'] as $key=&gt;$value)
  {
  do stuff
  }
  </code></pre>