jQuery UI 可排序 - 单击按钮时保存顺序

Question

我有一个列表，其中包含应由用户使用 jQuery UI 排序的项目。在用户选择了列表的最终顺序后，他必须单击按钮 "Ready"。单击按钮后，应使用序列化和 Ajax.

将订单发送到 saveoder.php

我试图用点击事件包围 ajax 调用，但随后会根据用户可排序操作的数量完成几个 POST 请求。我只需要一个 ajax post 请求。

$(function() { 
 $( "#sortable" ).sortable({
  update: function(event, ui) {  
   var order = $(this).sortable('serialize');
   
   $(document).on("click", "button" , function() { //that doesn't work
    $.ajax({
     data: order,
     type: 'POST',
     url: 'saverank.php'
    });
   });
  }
 }).disableSelection();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul id="sortable">
  <li id="id_1">Item 1</li>
  <li id="id_2">Item 2</li>
  <li id="id_3">Item 3</li>
</ul>
<button>Ready</button>

Answer 1

有一个内置方法可以执行此操作。参考 serialize or toArray

演示：http://jsfiddle.net/lotusgodkk/GCu2D/539/

JS:

$(function () {
    $("#sortable").sortable({
        update: function (event, ui) {
            var order = $(this).sortable('serialize');

            $(document).on("click", "button", function () { //that doesn't work
                $.ajax({
                    data: order,
                    type: 'POST',
                    url: 'saverank.php'
                });
            });
        }
    }).disableSelection();
    $('button').on('click', function () {
        var r = $("#sortable").sortable("toArray");
        var a = $("#sortable").sortable("serialize", {
            attribute: "id"
        });
        console.log(r, a);
    });
});

Answer 2

For single ajax call. Modified from accepted answer

$(function () {
    $("#sortable").sortable({
        update: function (event, ui) {
            var order = $(this).sortable('serialize');
        }
    }).disableSelection();
    $('button').on('click', function () {
        var a = $("#sortable").sortable("serialize", {
            attribute: "id"
        });
        console.log(a);
        $.ajax({
            data: a,
            type: 'POST',
            url: 'saverank.php'
        });
    });
});

jQuery UI 可排序 - 单击按钮时保存顺序

jQuery UI Sortable - saving order when button clicked

jquery

ajax

jquery-ui

serialization