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

Answer 2

This is what I did in the end

<script type="text/javascript">
    jQuery(function() {
        var str;
        $("#sortable").sortable();
        $("#sortable").disableSelection();
        $("#sortable li:lt(3)").css("font-weight", "bold");
        $("#cmdUpdateSortOrder").click(function() {             
            str = $("#sortable li.ui-state-default").sortable();
            var params = '{order:"' + str[0].title + ',' + str[1].title + ',' + str[2].title + '"}';
            $.ajax({
                type: "POST",
                url: "NewsFrontPage.aspx/SubmitJSON", //URL and function to call
                data: params, // Set Method Params
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                },
                contentType: "application/json; charset=utf-8", //Set Content-Type
                dataType: "json", // Set return Data Type
                success: function(msg, status) {
                    //Set Response outcome
                    $('#ajaxmsg')[0].innerHTML = msg.d;
                },
                error: function(xhr, msg, e) {
                    //this should only fire if the ajax call did not happen or there was an unhandled exception
                    alert(msg);
                }
            });
        });
    });   

</script>

I'm just returning the top three items as jSON data to a function SubmitJSON within the same page (NewsFrontPage.aspx). Thanks for setting me in the right direction. Note: I'm using the attribute 'title' to store the ids of the elements being sorted.