Jquery sortable list won't serialize, why?

Question

I'm implementing a sortable list of images with jquery in a Zend Framework application. I just can't get the .sortable('serialize') method to return more than an empty string.

When I try with a few simple examples outside my application it works.

Does it matter that the snippet below is wrapped in various other and other tags. I think it shouldn't. The unordered list should be found just by the id, right?

HTML:

<ul id="mylist">
    <li id="1">
        <div>
            <img src="image_1.jpg" />
            <p class="value_item">some text</p>
        </div>
    </li>
    <li id="2">
        <div>
            <img src="image_2.jpg" />
            <p class="value_item">some text</p>
        </div>
    </li>
</ul>

JavaScript:

$(document).ready(function() {                 
    $('#mylist').sortable({ 
        update: function() {
            var order = $('#mylist').sortable('serialize');
            alert(order);
        }                         
    });
});

Answer 1

http://api.jqueryui.com/sortable/#method-serialize

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

Answer 2

Jquery runs into problems when you use non-compliant ids.

Ids are not allowed to begin with a number. They can have numbers in them, just not as the first character.

Answer 3

(link update) hi, I stumbled across a similiar problem a few days ago, though in my case it was important to keep the order of the elements intact. I coded a small plugin which will allow you to serialize ul and ol lists of arbitrary depth and complexity:

serializeTree