JQuery Sortable UI with Laravel won't submit

After a lot of trial and error, I finally got the list sorted so you can drag and drop, but I can't get the list to save.

My guess is that this is a problem with part of the JS code, because because of what it looks like, the controller is never called. And if I had something wrong with the way I called the controller, but it was still trying, then Laravel would throw an error.

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

Here is my code:


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


JS After using "view source" I see that the url is indeed generating correctly, so it should be fine.


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

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

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




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;



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



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



Thanks to Josh I was able to figure it out, and with a little searching I got it to work! $ .ajax didn't work and the console didn't show anything for that, but I changed it to $ .post and it works like a champion.

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


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


source to share

1 answer

there is something wrong with your code i see here - i will try to get you set the correct path:

First, in your view, your li tag should have a data-order = "" attribute containing the department id, eg.

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


This means that your JS can receive and use this data at:

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


Second, where is your JS says:

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


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

data: {order: order},


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



All Articles