jQuery UI sortable serialize or toarray methods - advice wanted

Question

I have been looking at

http://jqueryui.com/demos/sortable/#default

most of the day. I would imaging updating a database with the new values is what most would want. As I am using ASP.NET my idea is to use the serialize to send the new values to a page that updates the database. Here is the script:

<script type="text/javascript">
    jQuery(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
    });
    jQuery(function() {
    $("#sortable li:lt(3)").css("font-weight", "bold");
    });
    jQuery(function() {
    $("#cmdUpdateSortOrder").click(function() {
            $(".neworder").append("<br />");
            $("#sortable li.ui-state-default").each(function() {
                $(".neworder").append($(this).text() + "<br />");
            });
            var str = $("#sortable li.ui-state-default").sortable("serialize");
            alert(str);
            var result = $('#sortable li').sortable('toArray');
            alert(result);
        });
    });
</script>

The 1st function is lifted from the jQueryUI example, The 2nd function highlights the top three rows, The 3rd function writes the new order to the page after a button click. Both the alerts give me:

[object Object]

I was hoping for an id and value pair, something like 0=3&1=2&2=4 etc. Also if anyone has any better ways of doing this, (ajax?) it would be much appreciated.

Answer 1

Here is how I parse a sortable for posting to an ASP.net MVC controller action via jquery ajax.

The parseRouteRoleIds() is probably what you're after. I just have a hidden span on each sortable() div with a class of rowId. When I render that portion of the page I just place the relevant item key into the span. Later, when the user is ready to save changes, I just concatenate my list of Ids in the parseRouteRoleIds() function.

$.ajax({
  type: 'POST',
  data: 'reviewCycleSwitchId=' + SWID + '&reviewCycleRoleIdList=' + parseRouteRoleIds(), 
  url:  root + saveRoutesPath,
  success: function(result) { // something you would do on success }
});

function parseRouteRoleIds() {
    var kys = '';
    $('.usedTiles li').each(function() {
        kys = kys + ',' + $('.rowId', $(this)).html();
    });
    return kys;
}