jQuery UI Sortable and Cookie

Question

Hey there,

I must admit, that I'm pretty much newbie to jQuery, though I want to somehow make this work.

I have a igoogle style content with sortable widgets with this code

HTML

<div class="column">
 <div class="box">
  <div class="box-header">
      Header Widget
  </div>
               <div class="box-content">
   <p>
   Content widget
   </p>
         </div>
  </div>
</div>


<div class="column">
     <div class="box">
      <div class="box-header">
          Header Widget
      </div>
                   <div class="box-content">
       <p>
       Content widget
       </p>
             </div>
      </div>
    </div>

jQuery

$(".column").sortable({
  connectWith: '.column',
  handle: '.box-header',
  revert: 500
 });

How do I get this work with cookie plugin?

Thanks for your time and help.

Answer 1

First off, download the cookie plug-in (if you haven't already): http://plugins.jquery.com/project/cookie

Next, read this short article that explains how to use the plug-in: http://www.electrictoolbox.com/jquery-cookies/

Finally, decide what information you want to store between page loads, and then hook up events to save that info whenever appropriate. To use that information, add an onReady event that looks it up and does something with it.

For instance, if you wanted to keep track of which column is in which order, you would need to put some IDs on those columns, then do:

$(".column").sortable({
  connectWith: '.column',
  handle: '.box-header',
  revert: 500
  update: function(event, ui) {
    // This will trigger after a sort is completed
    var ordering = "";
    var $columns = $(".column");
    $columns.each(function() {
      ordering += this.id + "=" + $columns.index(this) + ";";
    });
    $.cookie("ordering", ordering);
  }
});

and then do something like the following to use that information:

$(function() {
  var ordering = $.cookie("ordering");
  var orderings = ordering.split(";");
  $.each(orderings, function(index, ordering) {
    // Use each ordering, which will be in the form of "someId=someIndex" to actually
    // sort your stuff.  Not super-familiar with the Sortable package so you'll have to look
    // this part up on your own ... or just use basic jQuery stuff
  };
});

Hope that helps.

Answer 2

Well now I can get an array like this,

function saveOrder() {
    var cookieName = "order";
     $.cookie(cookieName, $(".column").each(function(){ $(this).sortable("toArray")}));
    }

and then

$(".column").sortable({
    connectWith: '.column',
        handle: '.box-header',
        revert: 500,
        update: function(event, ui) {
        saveOrder();

  }

Now how to retrieve it from the cookie?