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" >
                                <a href="{{ route("menu.edit", $menu->id) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
                                    <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" >
                                            <a href="{{ route("menu.edit", $child->id) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
                                                <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

CodePudding user response：

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/[email protected]/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">
          <a href="menu_edit.asp?id=item-1" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
          <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">
          <a href="menu_edit.asp?id=item-2" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
          <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">
          <a href="menu_edit.asp?id=item-3" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
          <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">
          <a href="menu_edit.asp?id=item-4" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
          <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">
          <a href="menu_edit.asp?id=item-5" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
          <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.

CodePudding user response：

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