Question

经过大量的反复试验后，我终于得到了一个可排序的列表，允许你拖放到度假区，但是我无法将列表保存起来。

我的猜测是代码的JS部分存在问题，因为从它的外观来看，控制器永远不会被调用。如果我对控制器的调用方式出了问题，但仍然在尝试，那么Laravel会抛出一个错误。

答案可能很简单，但我对Jquery或Ajax了解不多，所以我无法发现问题。

这是我的代码：

查看

    <ul class="sortable" style="list-style-type: none;">
@foreach ($departments as $department)
    <li class="row" id="{{ $department->id }}">
        <div class="col-xs-9"><span style="color: {{ $department->color }};">{{ $department->name }}</span></div>
        <div class="col-xs-3">
            <a href="{{ URL::route('chapter.editDepartment', (array($chapter->slug, $department->id))) }}"> EDIT </a>
        </div>
    </li>
@endforeach
</ul>

JS 使用“查看源代码”后，我可以看到URL确实正确生成，因此应该是好的。

    <script>

    $('.sortable').sortable().bind('sortupdate', function(e, ui) {

        var order = $('ul.sortable li').map(function(){
            return $(this).data("id");
        }).get();

        $.ajax({
            type: "POST",
            url: "{{ URL::route('chapter.departmentSort', $chapter->slug) }}",
            dataType: "json",
            data: {order: order, uuid: uuid},
            success: function(order){
                console.log(order)
            }
        });
    });

</script>

控制器

public function departmentSort($chapterSlug)
{
    // Get the chapter ID
    $chapter = $this->getChapterFromSlug($chapterSlug);

    $input = Input::get('order');
    $i = 1;

    foreach($input as $value) {
        $department = Department::find($value);

        $department->sort_order = $i;

        $department->save();

        $i++;
    }

    return Redirect::route('chapter.chapterDepartments', $chapter->slug);
}

路线

Route::post('{slug}/orderDepartment', ['as' => 'chapter.departmentSort', 'uses' => 'SerenityController@departmentSort']);

ANSWER

感谢Josh，我能够理解这一点，只需要更多的搜索，我就可以开始工作了！ $ .ajax不起作用，控制台没有显示任何内容，但是我将它换成了$ .post，它就像一个冠军。

$.post("{{ URL::route('chapter.departmentSort', $chapter->slug) }}", { order: order } );

现在唯一的问题是拖拽和drop在ipad上不起作用......

Answer 1

我在这里看到的代码有些问题 - 我会尽力让你走上正确的道路：

首先，在您看来，您的li代码需要包含一个包含部门ID的data-order =“”属性，例如

<li data-id="{{ $department->id }}">{{ $department->name }}</li>

这样你的JS就可以在以下地址获取和使用这些数据：

return $(this).data("id");

其次你的JS说：

data: {order: order, uuid: uuid},

你没有uuid，所以你不需要提交一个，你只需要像这样提交订单：

data: {order: order},

最后我建议您使用Google Chrome Javascript控制台来调试您的JavaScript。它有很好的错误报告 - 只需在Mac上按Option + CMD + J（我假设Windows等效的是Alt + Ctrl + J）

用Laravel排序的jQuery UI不会提交

1 个答案: