jQuery UI: sortable('toArray') returns an empty array

Question

This has me stumped. The follow code returns \",,,,,,\":

Answer 1

You can define which attribute to fetch like this:

var result = $(this).sortable('toArray', {attribute: 'value'});

Answer 2

$('.sortable').sortable('toArray'); will only parse the first element of the class sortable. You can parse all elements by using each:

$('.sortable').each(function(){
    result.push($(this).sortable('toArray'));
})

Answer 3

.sortable('toArray') serializes items Ids into array, and your items have no Ids, that's why you have empty strings.

Answer 4

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", "foo-1", and "foo_1" all serialize to "foo[]=1".

jq sortable reference

Answer 5

I was having this issue as well except i did have id's on my elements, jQuery's sortable('toArray') was very hit an miss on return the ids, however you can grab them in javascript using this:

function getSortOrder() {
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) {
        sort = sort + children[x].id + ",";
    }
    return sort;
}

This of course returns the ID's in a comma delimited string but you can return the array. I'm sure there's a better way to solve this problem, this is just the solution i found.

Answer 6

I see a few purely javascript answers. They work but beware, they may not return the items in the order that is visible on the screen. Using the code below, see jtsalva above, will return the items in the proper sorted order. This had me stumped for a while because I wanted to save the new order to a database, so I could reload the grid where someone left off.

var result = $(this).sortable('toArray', {attribute: 'value'});