Serialize jquery sortable

Question

Hello all,

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

Do your portlets have an id attribute?

From the docs

If serialize returns an empty string, make sure the id attributes include an underscore

Answer 2

you want to use the .toArray() function of sortable.

from the jquery sortable documentation:

toArray

Signature: .sortable( "toArray" )

Serializes the sortable's item id's into an array of string. If you have

<ul id="a_sortable"><br>
<li id="hello">Hello</li><br>
<li id="goodbye">Good bye</li><br>
</ul>

and do

var result = $('#a_sortable').sortable('toArray');

then

result[0] will contain "hello" and result[1] will contain "goodbye".

so to be able to save the state, you'll have to have some sort of ajax call for the change option that calls the .sortable('toArray') and you'll have a nice array of the id's in order.

Answer 3

I ended up solving with this code:

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

Which serializes each column instead of only the first column.