CODEWITHSUNDEEP
jquery-uijquery-ui-sortableiqueryable.toarray
bjork24
bjork24

Reputation: 3193

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

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

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

Why?! It's driving me insane! Any suggestions?

Upvotes: 28

Views: 47299

Answers (7)

Keith Aymar
Keith Aymar

Reputation: 924

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

Upvotes: 4

jtsalva
jtsalva

Reputation: 93

To use another attribute you can do this:

$('#element').sortable('toArray' {attribute: 'value'})

This will make it so it now uses the attribute 'value' from your code.

Documentation on Sortable toArray method

Upvotes: 1

trojan
trojan

Reputation: 1535

$('.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'));
})

Upvotes: 0

Skeletor
Skeletor

Reputation: 3413

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

Upvotes: 0

Andrew Afternoon-Delight Hayde
Andrew Afternoon-Delight Hayde

Reputation: 321

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.

Upvotes: 3

Niklaus
Niklaus

Reputation: 991

You can define which attribute to fetch like this:

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

Upvotes: 73

manji
manji

Reputation: 47978

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

Upvotes: 46

Related Questions