JQuery UI sortable serialization method or toarray - recommendations

Question

I watched

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

most of the day. I would visualize updating the database with new values ​​- this is what most people need. Since I use ASP.NET, my idea is to use serialization to send 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 first function is removed from the jQueryUI example. The second function selects the top three rows. The third function writes a new order to the page after clicking the button. Both warnings give me:

[object of object]

I was hoping for a pair of id and value, something like 0 = 3 & 1 = 2 & 2 = 4, etc. Also, if someone has better ways to do this, (ajax?) Would be very helpful.

Answer 1

,

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

jSON SubmitJSON (NewsFrontPage.aspx). , . . 'title' .

Answer 2

MVC- ASP.net jquery ajax.

, parseRouteRoleIds() - , . sortable() div rowId. , . , , parseRouteRoleIds().

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