I'm trying to make a sortable table in my laravel app where the order also needs to be updated in the database, I'm trying to do it with jquery, ajax.

I tried to figure it out with this pieces of code:

JQuery/Ajax

$(document).ready(function () {
        $('table tbody').sortable({
            update: function (event, ui) {
                $(this).children().each(function (index) {
                    if ($(this).attr('data-position') != (index   1)) {
                        $(this).attr('data-position', (index   1)).addClass('updated');
                    }
                });

                saveNewPositions();
            }
        });
    });

    function saveNewPositions() {
        var positions = [];
        $('updated').each(function () {
            position.push([$(this).attr('data-index'), $(this).attr('data-position')]);
            $(this).removeClass('updated');
        });

        $.ajax({
            url: "{{ "cursos" }}",
            method: 'POST',
            dataType: 'text',
            data: {
                updated: 1,
                positions: positions
            }, success: function (response) {
                console.log(response)
            }
        })
    }

Then in my web.php I created a post route:

Route::post('/cursos', 'CourseController@updateOrder')->name('post');

In my controller I created this function:

    public static function updateOrder()
{
    if (isset($_POST['update'])) {
        foreach($_POST['positions'] as $positions) {
            $index = $positions[0];
            $newPosition = $positions[1];

            $seccion = \App\Models\SectionCourse::findOrFail($index);
            $seccion->order = $newPosition;
            $seccion->save();
        }
        exit('success');
    }
}

When I'm trying to update the order, I'm having an error on the console of 500 (Internal Server Error). Sorry if I'm doing something bad on Ajax, this is the first time I try to do something on it.

CodePudding user response：

There is 2 cases for 500 internal server error

1. you had not put the {csrf} token there when sending request through ajax.
2. Use new FormData() object while sending response through ajax and use these params with processData: false,contentType: false,type: 'POST'

CodePudding user response：

I've done something very similar to this, so as I see it right now you are firstly missing a csrf token, so in the view add this below the code where you declare the $('updated') each.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$.ajax({
    method: 'POST',
    dataType: 'json',
    url: 'cursos', // No {{}} needed here
    data: {
        update: 1,
        orders: orders,
         _token: '{{ csrf_token() }}'
     },
});

Next your controller is a mess. So rewrite it to fit at least some of laravels writing standards. Something like this

public function updateOrder(Request $request)
{
    foreach ($request->positions as $position) {
        $index = $position[0];
        $newPosition = $position[1];
        $seccion = SectionCourse::findOrFail($index);
        $seccion->order = $newPosition;
        $seccion->save();
    }

    return response('success', 200);
}

Also add the following when declaring .sortable

axis: 'y',
containment: 'parent',
update: ...