jquery sortable serialize returns empty string

Question

HTML:

<ul id="categories_list" class="ui-sortable">
<li class="cat_row" style=""> item1 </li>
<li class="cat_row" style=""> item2 </li>
<li class="cat_row"> item3 </li>
</ul>

Javascript:

$("#categories_list").sortable({
placeholder: 'sortable_placeholder',
update : function () {
    var order = $("#categories_list").sortable('serialize');
    console.log(order);
} 
}); 

order returns "empty string" why is that?

Answer 1

The id attributes on your li's need to look like this:

<ul id="categories_list" class="ui-sortable">
<li class="catRow_1" style=""> item1 </li>
<li class="catRow_2" style=""> item2 </li>
<li class="catRow_3"> item3 </li>
</ul>

You need to have the order number seperated by an underscore as per here.

Answer 2

Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

You'll need to specify id's for the LI-Tags!

See http://jsfiddle.net/m47mq/