使用Laravel排序的jQuery UI不会提交 [英] jQuery UI Sortable with Laravel will not submit

问题描述

经过反复试验，我终于得到了一个可排序的列表，允许您拖放到度假村，但是我无法保存该列表.

After a lot of trial and error I finally got a sortable list to allow you to drag and drop to resort, but I cannot get the list to save.

我的猜测是这与代码的JS部分有关，因为从外观上看，控制器永远不会被调用.而且，如果我对控制器的调用方式有问题，但仍然尝试执行，则Laravel会抛出错误.

My guess is that it is an issue with the JS portion of the code, because from what it looks like, the controller never gets called. And if I had something wrong with how I called the controller but it still attempted then Laravel would throw an error.

答案可能真的很简单，但是我对Jquery或Ajax知之甚少，所以我找不到问题所在.

The answer is probably really simple, but I don't know much about Jquery or Ajax so I couldn't spot the problem.

这是我的代码:

查看

    <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确实生成正确，因此应该很好.

JS After using "view source" I can see that the URL did generate correctly, so that should be good.

    <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']);

答案

多亏了乔希，我才能够理解这一点，并且通过多一点的搜索，我就可以正常工作了！ $ .ajax无法正常工作，控制台也没有显示任何内容，但我将其换成$ .post，它的工作原理就像冠军.

Thanks to Josh I was able to understand this, and with just a little more searching I got it to work! The $.ajax didn't work, and the console showed nothing for that, but I swapped it out for $.post and it works like a champ.

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

现在唯一的问题是拖动&在ipad上无法使用drop ...

Now the only problem is that the drag & drop doesn't work on ipad...

推荐答案

您的代码有些错误，我可以在这里看到-我会尽力将您设置在正确的路径上:

there's a few things wrong with your code I can see here - I'll try my best to set you on the right path:

首先，在您的视图中，您的li标签需要具有一个data-order ="属性，其中包含部门ID，例如

Firstly in your view your li tag needs to have a data-order="" attribute containing the department id e.g.

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

这是为了使您的JS可以在以下位置获取和使用此数据:

This is so your JS can get and use this data at:

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

第二个您的JS说:

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

您没有uuid，因此不需要提交一个，只需提交订单即可，如下所示:

You don't have a uuid so you don't need to submit one, you only need to submit the order like so:

data: {order: order},

最后，我建议您使用Google Chrome Javascript控制台调试JavaScript.它具有良好的错误报告功能-只需在Mac上按Option + CMD + J(我假设Windows等效于Alt + Ctrl + J)

And finally I would suggest you use the Google Chrome Javascript console to debug your javascript. It has good error reporting - just press Option+CMD+J on a Mac (I assume the Windows equivalent is Alt+Ctrl+J)

这篇关于使用Laravel排序的jQuery UI不会提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！