Question

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.

Anyway, I just have the jquery code copied from their portlet example:

$(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('<span class="ui-icon ui-icon-minusthick"></span>')
            .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();
});

I have tried adding $(".column").serialize() and $(".column").sortable('serialize') and the same as above, but using $(".portlet") instead… I created a variable and set it to the value of the serialize method, but it returns nothing. What am I doing wrong?

Edit: Here is the code for column with a portlet inside:

 <div class="column" id="column_1">

<div class="portlet" id="portlet_1">

<div class="portlet-header">Times</div>
&nbsp Longest:
<div class="portlet-content">

<ChartFXGauge:DigitalPanel ID="LongestTimePanel" runat="server" >
</ChartFXGauge:DigitalPanel>
<p>
<a href="LongestORTime.aspx">(BySurgeon)</a>
</p>
</div>
</div>
</div>

Answer 1

I ended up solving with this code:

$(".column").each(function() {
alert($(this).sortable("toArray"));
});

Which serializes each column instead of only the first column.