CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Gavin Sellers
Gavin Sellers

Reputation: 664

JQuery UI .sortable('toArray') returning HTMLUListElement instead of array of id's

I'm trying to create a sorted array out of my sortable elements but the 'toArray' method will not work. Here's my sortable html code:

<div class="control-group" style="cursor:pointer;">
    <label class="control-label" for="input-sort">Preferences</label>
            <div class="controls">
            <ul id= "sortable">
                    <li class="ui-state-default" id="Item1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
                    <li class="ui-state-default" id="Item2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
                    <li class="ui-state-default" id="Item3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
                    <li class="ui-state-default" id="Item4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
                    <li class="ui-state-default" id="Item5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
                    <li class="ui-state-default" id="Item6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
                    <li class="ui-state-default" id="Item7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
            </ul>
            </div>
    </div>

and here's the corresponding javascript:

<script>
    var result=$("#sortable").sortable("toArray");
    $("#sortable").sortable({
        stop: function(event, ui) {
            document.getElementById("info").innerHTML=result + " and " + result[0];
        }
    });
</script>

When I display result it returns[object Object] and [object HTMLLIElement] and I even tried just assigning result to $("sortable li") but it didn't return any of the elements. Any help is appreciated. Thanks.

Upvotes: 0

Views: 5335

Answers (1)

Kevin B
Kevin B

Reputation: 95065

Your code doesn't make any logical sense, however I think this is what you are going after.

$("#sortable").sortable({
    stop: function(event, ui) {
        $("#info").html(JSON.stringify($("#sortable").sortable('toArray')));
    }
});

Note however it will not work in IE<8 unless you include the JSON library.

in your code, result is never updated therefore it will always contain the jquery object, which will always be an object and not an array of values.

Upvotes: 3

Related Questions