Question

At the moment I have two (maybe more) unordered lists which are sortable with jquery and ui.

The things that work are that the lists are connected, items are draggable, items can be removed and a form that adds to the list.

What I need however is a function that gets all the content for li items and json encode them ready to be sent off to some db function, or something.

Im new to jquery however and cant find documentation for li items.

Hope Ive explained this well.

Daniel

UPDATE – Sample Code

    <script type="text/javascript">

    function addSortable(value) {
        $("#sortable1").prepend("<li class='ui-state-default' id='"+value+"'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"+value+"</li>");
    }

    function deleteItem(value) {
        $("#item-"+value).fadeOut('slow');

        $('#sortable1 li').each(function() {
            var text = $(this).text();
        });

        document.getElementById('jsoningreds').innerHTML = text;

    }

    $(function() {
        $("#sortable1, #sortable2").sortable({
            connectWith: '.connectedSortable'
        }).disableSelection();
    });
    </script>

    <ul id="sortable1" class="connectedSortable">

    <li id="item-0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>8 large chicken thighs, skinned <a href="javascript:deleteItem(0)" class="deleteItem"></a></li>

    <li id="item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>seasoned flour (celery salt, cayenne pepper, paprika and white pepper) <a href="javascript:deleteItem(1)" class="deleteItem"></a></li>
    <li id="item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2 small eggs, beaten <a href="javascript:deleteItem(2)" class="deleteItem"></a></li>
    <li id="item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>100g butter <a href="javascript:deleteItem(3)" class="deleteItem"></a></li>
    </ul>

    <hr />

    <h3>Recipe number 2</h3>
    <ul id="sortable2" class="connectedSortable">

<li id="item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3 tsp vegetable oil <a href="javascript:deleteItem(5)" class="deleteItem"></a></li>
    <li id="item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>1 bay leaf <a href="javascript:deleteItem(6)" class="deleteItem"></a></li>
    <li id="item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>250g onions, finely sliced <a href="javascript:deleteItem(7)" class="deleteItem"></a></li>
    </ul>

   <p id="jsoningreds">hello</p>    

Answer 1

You might want to look at .sortable('serialize') – It may solve your problem for you:

Serializes the sortable’s item id’s
into a form/ajax submittable string.
Calling this method produces a hash
that can be appended to any url to
easily submit a new item order back to
the server.

It works by default by looking at the
id of each item in the format
'setname_number', and it spits out a
hash like
"setname[]=number&setname[]=number".

You can also give in a option hash as
second argument to custom define how
the function works. The possible
options are: key (replaces part1[]
with whatever you want), attribute
(test another attribute than id) and
expression (use your own regexp).

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.

If serialize does more than you need, .sortable('toArray') should return you an array containing the ids of each element in the sortable.