Get order of list items in a jQuery Sortable list after resort

May this helps:

alert($( "#sortable" ).sortable( "toArray" ).toSource());

Try using serialize to format a string to send to your database update script.

http://jsfiddle.net/zFQ2j/

http://docs.jquery.com/UI/Sortable#method-serialize

I wrote an answer to this question 5 years ago, but that answer sucked (and this question has almost 38,000 views), so here's an improved answer.

There's essentially three parts of this question that you have to solve. We'll look at all three.

Responding to changes in the sort order (Step 1)

The first issue we need to solve is reacting to changes in the order of sorted elements. If we check out the jQuery UI Sortable Widget's documentation, we see that it has a change event which fires whenever the sort order changes, and is perfect for our needs.

Side note: My original answer used stop instead of the change event. change is better (at least in this case) because it will report all changes in sorting, whether the change was interactive (user) or programmatic, and only if the order has actually changed. On the other hand, the sort event is only fired when the user stops sorting (releases the mouse, or lifts their finger).

Using the sort event, we can now respond to changes in sorting. The following will initialize a Sortable widget for us, and allow us to set a function to be called when the sort even fires:

var $sortableList = $("#your-list");

var sortEventHandler = function(event, ui){
    console.log("New sort order!");
};

$sortableList.sortable({
    stop: sortEventHandler
});

// You can also set the event handler on an already existing Sortable widget this way:

$sortableList.on("sortchange", sortEventHandler);

With that done, we're now ready to take on step 2:

Retrieving the sorted elements (Step 2)

This part is fairly simple. We just need to get an array of the elements in our sorted list. To do this, we can just ask for the children of the ul (list) element, using the jQuery function children():

var listElements = $sortableList.children();

console.log(listElements); // [ <li>, <li>, ... ]

Great, but we specifically need the element's values:

var listValues = [];

listElement.forEach(function(element){
    listValues.push(element.innerHTML);
});

console.log(listValues); // [ "Item 1", "Item 2", ... ]

Using .sortable("toArray") or .serialize() are also options.

Nice! On to the final bit.

Serializing & sending off the new sorted order (Step 3)

Serialization is "the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer, or transmitted across a network connection link)" (thanks Wikipedia!)

How you do this depends a lot on your specific needs, so we'll just discuss some of the ways you could get it done using jQuery.

AJAX:

If we use AJAX, we can just shoot off a request to the server with the new order. jQuery will automatically handle serializing listValues for us:

$.post("your-server.com/save_order", { "items": listValues } );

Or if you prefer JSON:

$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );

Form

Create a form:

<form action="your-server.com/save_order" method="POST">
    <input name="items" value="" />
</form>

Update the item input:

var serializedValue = $.param(listValues);

$("#ourForm > input").val(JSON.encode(listValues));

Send it:

$("#ourForm").submit()

Old answer:

HTML:

<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>

JavaScript:

$(".selector").sortable({
    stop: function(event, ui) {
        var data = "";

        $("#sortable li").each(function(i, el){
            var p = $(el).text().toLowerCase().replace(" ", "_");
            data += p+"="+$(el).index()+",";
        });

        $("form > [name='new_order']").val(data.slice(0, -1));
        $("form").submit();
    }
});

And in save_order.php, you can parse the POST variable "new_order" and get the orders of Item 1, Item 2, Item 3, etc.