title: Serialize jquery sortable
body: <p>I have been digging around on this site and googling for a while now and I cannot find a good solution to my problem. I would like to be able to save the state of my jquery portlets on a page. I would rather not have a "save state" button if I can avoid it.</p>
  
  <p>Anyway, I just have the jquery code copied from their portlet example:</p>
  
  <pre><code>$(function() {
      $(".column").sortable({
          connectWith: '.column'
      });
  
      $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
          .find(".portlet-header")
              .addClass("ui-widget-header ui-corner-all")
              .prepend('&lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt;')
              .end()
          .find(".portlet-content");
  
      $(".portlet-header .ui-icon").click(function() {
          $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
          $(this).parents(".portlet:first").find(".portlet-content").toggle();
      });
  
      $(".column").disableSelection();
  });
  </code></pre>
  
  <p>I have tried adding <code>$(".column").serialize()</code> and <code>$(".column").sortable('serialize')</code> and the same as above, but using <code>$(".portlet")</code> instead... I created a variable and set it to the value of the serialize method, but it returns nothing. What am I doing wrong?</p>
  
  <p>Edit: Here is the code for column with a portlet inside:</p>
  
  <pre><code> &lt;div class="column" id="column_1"&gt;
  
  &lt;div class="portlet" id="portlet_1"&gt;
  
  &lt;div class="portlet-header"&gt;Times&lt;/div&gt;
  &amp;nbsp Longest:
  &lt;div class="portlet-content"&gt;
  
  &lt;ChartFXGauge:DigitalPanel ID="LongestTimePanel" runat="server" &gt;
  &lt;/ChartFXGauge:DigitalPanel&gt;
  &lt;p&gt;
  &lt;a href="LongestORTime.aspx"&gt;(BySurgeon)&lt;/a&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>