JQuery 可排序未发布正确的表单数据

Question

我正在尝试使用 sorteable 将用户附加到列表，并且我有一个编码为的表单:

<form action={{ secure_url('send-data') }} method="POST" data-parsley-validate class="form-horizontal form-label-left">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="row">
        <input type="submit" name="Salvar">
        <div class="col-md-6 col-sm-6 col-xs-6">Confirmados
            <ul class="list-group list-group-sortable-connected connectedSortable" id="confirmados">@if(empty($confirmados)) <br /> @endif
                @foreach ( $users as $v )
                @if (in_array($v->id, $confirmados))
                <li class="list-group-item list-group-item-success"><input type="hidden" name="confirmados[]" value="{{$v->id}}">{{$v->nome}}</li>
                @endif
                @endforeach
            </ul>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">Ausentes
            <ul class="list-group list-group-sortable-connected connectedSortable" id="ausentes">@if(empty($ausentes)) <br /> @endif
                @foreach ( $users as $v )
                @if (in_array($v->id, $ausentes))
                <li class="list-group-item list-group-item-danger"><input type="hidden" name="ausentes[]" value="{{$v->id}}">{{$v->nome}}</li>
                @endif
                @endforeach
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">Pendentes
                <ul class="list-group list-group-sortable-connected connectedSortable" id="pendentes">
                    @foreach ( $users as $v )
                    @if (!in_array($v->id, $ausentes) && !in_array($v->id, $confirmados))
                    <li class="list-group-item list-group-item-info"><input type="hidden" name="pendentes[]" value="{{$v->id}}">{{$v->nome}}</li>
                    @endif
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</form>

我的 JS 是这样的:

<script type="text/javascript">
 $(function () {
    $("#ausentes, #confirmados, #pendentes").sortable({
        connectWith: ".connectedSortable",
        receive: function(event, ui) {
            if (ui.sender[0].id === 'pendentes') {
                ui.item.removeClass("list-group-item-info");
            } else if (ui.sender[0].id === 'confirmados') {
                ui.item.removeClass("list-group-item-success");
            } else if (ui.sender[0].id === 'ausentes') {
                ui.item.removeClass("list-group-item-danger");
            }

            if (this.id === 'pendentes') {
                ui.item.addClass("list-group-item-info");
                ui.item.attr("name", "pendentes[]");
            } else if (this.id === 'confirmados') {
                ui.item.addClass("list-group-item-success");
                ui.item.attr("name", "confirmados[]");
            } else if (this.id === 'ausentes') {
                ui.item.addClass("list-group-item-danger");
                ui.item.attr("name", "ausentes[]");
            }
            toastr.options.preventDuplicates = true;
            $.ajax({
                url: $('.form-horizontal').attr('action'),
                data: $('.form-horizontal').serialize(),
                method: $('.form-horizontal').attr('method'),
                success:function(data) {
                    $('#ajax').html(data);

                    toastr.success("Alterações salvas com sucesso");
                }
            });
        },
    }).disableSelection();
});
</script>

但是在我将用户拖放到列表周围之后，当 ajax 执行帖子时，它会继续按照原始内容发送数据。它没有得到修改。

如果所有用户都在“pendentes”列表中，即使我更改为“confirmados”列表，它也会将每个人发送为“pendentes”。

这就是我进行更改后得到的结果:

array:2 [▼
  "_token" => "ynDyoSBCQ92jG5r5MKdItiuwq386GKaPU52rg2wv"
  "pendentes" => array:11 [▼
    0 => "20500"
    1 => "24261"
    2 => "24908"
    3 => "24666"
    4 => "24667"
    5 => "24263"
    6 => "24264"
    7 => "24265"
    8 => "24266"
    9 => "24267"
    10 => "24268"
  ]
]

Answer 1

it keeps sending the data as it's original contents. It doesn't get the modifications.

这是因为您正在使用:

$('.form-horizontal').serialize()

如果你需要一个对象数组，你需要自己序列化。例如，您可以选择所有悬垂并构建最终数组:

var pendentesArr = $('#pendentes :input').serializeArray().reduce(function (acc, ele) {
        acc.push(ele.value);
        return acc;
}, []);

代码片段:

$("#ausentes, #confirmados, #pendentes").sortable({
    connectWith: ".connectedSortable",
    receive: function (event, ui) {
        if (ui.sender[0].id === 'pendentes') {
            ui.item.removeClass("list-group-item-info");
        } else if (ui.sender[0].id === 'confirmados') {
            ui.item.removeClass("list-group-item-success");
        } else if (ui.sender[0].id === 'ausentes') {
            ui.item.removeClass("list-group-item-danger");
        }

        if (this.id === 'pendentes') {
            ui.item.addClass("list-group-item-info");
            ui.item.attr("name", "pendentes[]");
        } else if (this.id === 'confirmados') {
            ui.item.addClass("list-group-item-success");
            ui.item.attr("name", "confirmados[]");
        } else if (this.id === 'ausentes') {
            ui.item.addClass("list-group-item-danger");
            ui.item.attr("name", "ausentes[]");
        }
        //toastr.options.preventDuplicates = true;
        var pendentesArr = $('#pendentes :input').serializeArray().reduce(function (acc, ele) {
            acc.push(ele.value);
            return acc;
        }, []);
        var ausentesArr = $('#ausentes :input').serializeArray().reduce(function (acc, ele) {
            acc.push(ele.value);
            return acc;
        }, []);
        var confirmadosArr = $('#confirmados :input').serializeArray().reduce(function (acc, ele) {
            acc.push(ele.value);
            return acc;
        }, []);
        var dataTobeSent = {_token: $('[name="_token"]').val(), pendentes: pendentesArr,
            ausentes: ausentesArr, confirmados: confirmadosArr};

        console.log('dataTobeSent: ' + JSON.stringify(dataTobeSent));
        $.ajax({
            url: $('.form-horizontal').attr('action'),
            data: $.param(dataTobeSent),
            method: $('.form-horizontal').attr('method'),
            success: function (data) {
                $('#ajax').html(data);

                toastr.success("Alterações salvas com sucesso");
            }
        });
    },
}).disableSelection();

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>




<form action='' method="POST" data-parsley-validate class="form-horizontal form-label-left">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">

    <div class="row">
        <input type="submit" name="Salvar">

        <div class="col-md-6 col-sm-6 col-xs-6">Confirmados
            <ul class="list-group list-group-sortable-connected connectedSortable" id="confirmados">
                <li class="list-group-item list-group-item-success"><input type="hidden" name="confirmados[]" value="1">1
                </li>
                <li class="list-group-item list-group-item-success"><input type="hidden" name="confirmados[]" value="2">2
                </li>
            </ul>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">Ausentes
            <ul class="list-group list-group-sortable-connected connectedSortable" id="ausentes">
                <li class="list-group-item list-group-item-danger"><input type="hidden" name="ausentes[]" value="a">a
                </li>
                <li class="list-group-item list-group-item-danger"><input type="hidden" name="ausentes[]" value="b">b
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">Pendentes
                <ul class="list-group list-group-sortable-connected connectedSortable" id="pendentes">
                    <li class="list-group-item list-group-item-info"><input type="hidden" name="pendentes[]" value="11">11
                    </li>
                    <li class="list-group-item list-group-item-info"><input type="hidden" name="pendentes[]" value="12">12
                    </li>
                    <li class="list-group-item list-group-item-info"><input type="hidden" name="pendentes[]" value="13">13
                    </li>
                </ul>
            </div>
        </div>
    </div>
</form>