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.

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.

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

Here is my code:

View

    <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))) }}" rel="nofollow noreferrer noopener"> EDIT </a>
        </div>
    </li>
@endforeach
</ul>

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>

Controller
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
Route::post('{slug}/orderDepartment', ['as' => 'chapter.departmentSort', 'uses' => '<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4f7c1d6c1cacdd0dde7cbcad0d6cbc8c8c1d6e4c0c1d4c5d6d0c9c1cad0f7cbd6d0">[email protected]</a>']);

ANSWER

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 } );

Now the only problem is that the drag & drop doesn’t work on ipad…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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:

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>

This is so your JS can get and use this data at:
return $(this).data("id");

Secondly where 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 so:
data: {order: order},

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)


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x