title: jQuery UI Sortable and JS Cookie
body: <p><strong>The Statement</strong><br />
  Okay, so I've been trying to get <a href="http://jqueryui.com/sortable" rel="nofollow noreferrer">jQuery UI's Sortable Plugin</a> to work on my website. You can check out their API <a href="http://api.jqueryui.com/sortable" rel="nofollow noreferrer">here</a> if you're not familiar with the plugin. After a few days of debugging (have had many problems with the plugin) it's finally working good. Then I spent a couple of days working on a non-practical way of storing the order as cookies with PHP which was having some problems---and I'd rather not do it with PHP anyway.</p>
  
  <p>Enter <a href="https://github.com/carhartl/jquery-cookie" rel="nofollow noreferrer">jQuery Cookie</a> I'm sure you're all familiar with. I've used it before and am even using it to store the toggled states of said sortable sections, but I'm certainly not a pro with it (in fact, I'm new to Javascript/jQuery altogether really).</p>
  
  <p>Anyway, I've seen several questions on StackOverflow, and other places, discussing the topic and introducing solutions from various people. However, all of these solutions seem to be 1-4 years old, and not working for me. It could simply be that I'm doing something wrong in implementing their code--- it's certainly not in impossibility, me being pretty inexperienced and all.</p>
  
  <p>That being said, I would appreciate it if you would look at my demo / code and tell me what's wrong, or simply help me re-write it entirely to get it working.</p>
  
  <p><br /><strong>The Code</strong><br /></p>
  
  <pre><code>function restoreOrder() {
      var cookie = $.cookie('cookie_name');
      if (!cookie) return;
      var SavedID = cookie.split('|');
      for ( var u=0, ul=SavedID.length; u &lt; ul; u++ ){ SavedID[u] = SavedID[u].split(',');}
      for (var Scolumn=0, n = SavedID.length; Scolumn &lt; n; Scolumn++) {
          for (var Sitem=0, m = SavedID[Scolumn].length; Sitem &lt; m; Sitem++) {
              $("#sortablemain").eq(Scolumn).append($("#sortablemain").children("#" + SavedID[Scolumn][Sitem]));
          }
      }
  }
  
  $(function() {
      $( "#sortable" ).sortable({
      handle: "h3",
      cursor: "move",
      axis: "y",
      placeholder: "marker",
      opacity: 0.3,
      scrollSpeed: 50,
      containment: '#sortable',
      forcePlaceholderSize: true,
      scroll: true,
      scrollSensitivity: 100,
      revert: 200,
      helper: 'clone',
      tolerance: 'pointer'
      });
  });
  
  $(function() {
      $( "#sortablemain" ).sortable({
      handle: "h2",
      cursor: "move",
      axis: "y",
      placeholder: "marker",
      opacity: 0.3,
      scrollSpeed: 50,
      containment: '#sortablemain',
      forcePlaceholderSize: true,
      scroll: true,
      scrollSensitivity: 100,
      revert: 200,
      helper: 'clone',
      tolerance: 'pointer',
      update: function(event, ui) {
            var cooked = [];
            $( "#sortablemain" ).each(function(index, domEle){ cooked[index]=    $(domEle).sortable('toArray');});
            $.cookie('cookie_name', 'x'+cooked.join('|'), { expires: 7, path: '/'});
        }
      });
  });
  
  $(document).ready(function(){
      restoreOrder();
  });
  </code></pre>
  
  <p><br />
  <em>[Above "solution" (not working) obtained from an answer to <a href="https://stackoverflow.com/questions/1370417/jquery-ui-sortable-and-cookie">this question</a>]</em><br /></p>
  
  <p><br /><strong>The Sorting Demo</strong> <em>[without cookies]<strong>[working]</em></strong>:<br />
  <a href="http://jsfiddle.net/mQGdS/" rel="nofollow noreferrer">http://jsfiddle.net/mQGdS/</a></p>
  
  <p><br /><strong>The Sorting Demo</strong> <em>[with cookies]<strong>[not working -- sorting still works, cookies don't]</em></strong>:<br />
  <a href="http://jsfiddle.net/48tJM/2" rel="nofollow noreferrer">http://jsfiddle.net/48tJM/2</a></p>
  
  <p><br /><strong>Another failed cookie demo attempt (different cookie method)</strong>:<br />
  <a href="http://jsfiddle.net/mQGdS/3" rel="nofollow noreferrer">http://jsfiddle.net/mQGdS/3</a> (obtained from an answer to <a href="https://stackoverflow.com/questions/746800/jquery-ui-sortables-and-cookie-plugin-with-multiple-lists?rq=1">this question</a>).</p>
  
  <p>Still no luck. :(</p>
  
  <p><br /><strong>In Closing</strong> <em>[clarification]</em><br />
  The above jsFiddle (with cookies) is only attempting to create a cookie for #sortablemain. In reality, I need to create 2 separate cookies, storing the order of each of the two lists, #sortable and #sortablemain separately. As shown in the jsFiddle demos, I am using jQuery 1.8.3 and jQuery UI 1.9.2<br /><br />
  <br />Much (really &lt;3) appreciated,<br />
  Dustin</p>