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);
        }                         
    });
});

Solution 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.

Solution 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.

Solution 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

Comments

[Cameron]

yes, that solved my problem too. That means all those examples for jquery sortable table solutions here in stackoverflow are wrong.

[adam]

If your three LI's are (house, car, tree) you can name/ID them "li_House" "li_Car" and "li_Tree". Then when you serialize them, you will get the name values in order, rather than the index in which it was created.

[ZettaGeek]

I've been looking for this all morning. Thank you for answering this question!

[Ben]

damn it… saved me a lot of time

[Bhavin Thummar]

in my case, After ajax call "ui-sortable" class has been removed and this error was reflected when sortable call with a serialize. I have solved after add "ui-sortable" to main parent div of a selector like example tag of id:"mylist" for this example. Notes: I am jquery v1.7.1 and jQuery UI - v1.10.3

[Bhavin Thummar]

Second solution for me to add "ui-sortable" class by automatically using below function and then serialize. $(selector).sortable().sortable("serialize")

[Khn Rzk]

Exactly!! Worked