Sort and Save table data using jquery sortable - ajax

Question

Hi I am trying to set up a table with parent and child data which can be sorted by using the jquery sortable library, I am able to get the position and the respective ids of the data but unable to send the to the controller using jquery
HTML Part:
<tbody class="sort">
#foreach($menus as $menu)
<tr id = "{{ $menu->id }}" class="parent">
<td>{{$menu->name}}</td>
<td>{{ $menu->link }}</td>
#if($menu->sub == 1)
<td>Active</td>
#else
<td>In-Active</td>
#endif
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$menu->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
#if(count(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get())>0)
#foreach(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get() as $child)
<tr id="{{ $child->id }}">
<td>~{{$child->name}}</td>
<td>{{ $child->link }}</td>
<td></td>
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$child->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
#endforeach
#endif
</tr>
#endforeach
</tbody>
Jquery part:
$(document).ready(function(){
$('.sort').sortable({
stop:function(event, ui){
var parameter = new Array();
var position = new Array();
$('.sort>tr').each(function(){
parameter.push($(this).attr("id"));
});
$(this).children().each(function(index) {
position.push(index + 1);
});
$.ajax({
url:"{{ route('menu.savePosition') }}",
method:"POST",
data:{"id":parameter,"position":position},
success:function(response){
console.log(response);
},
error:function(xhr,response){
console.log(xhr.status);
}
});
},
}).disableSelection();
});
Controller Part:
public function SavePosition(Request $req){
$position = ($req->all());
return $req->all();
// foreach($file as $pos){
// $id = $pos[1];
// $position = $pos[0];
// $menu = Menu::findOrFail($id);
// $menu->position = $position;
// $menu->save();
// }
}
After all this the console looks like the following :
please help me out fixing the issue
any help would be highly appreciated
Thanks in advance

Answer 1

Consider the following example.
$(function() {
$(".sort").sortable({
items: "> tbody > tr",
stop: function(event, ui) {
var parameter = $(this).sortable("toArray");
var position = [];
$.each(parameter, function(index, value) {
position.push(index + 1);
});
console.log(parameter, position);
$.ajax({
url: "{{ route('menu.savePosition') }}",
method: "POST",
data: {
"id": parameter,
"position": position
},
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.log(status, error);
}
});
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<table class="sort" width="340">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th>Status</th>
<td></td>
</tr>
</thead>
<tbody>
<tr id="item-1">
<td>Item 1</td>
<td>Link 1</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-1" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-2">
<td>Item 2</td>
<td>Link 2</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-2" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-3">
<td>Item 3</td>
<td>Link 3</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-3" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-4">
<td>Item 4</td>
<td>Link 4</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-4" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-5">
<td>Item 5</td>
<td>Link 5</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-5" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
It's not clear why you are sending the position as the Array of items will already be in the order of the items. I did include it just in case you do need it for something else.
It's easier to use the toArray method: https://api.jqueryui.com/sortable/#method-toArray You will also want to properly define the items so that Sortable knows what the items should be.

Answer 2

Try this way.
$('#element').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '/your/url/here'
});
}
});