Sortable on null id in laravel

Question

I try to make sortable function for my categories and I'm using JQuery UI

Logic

1. If category category_id is null it means that category is parent. (in my case i used category_id instead of parent_id just different naming)
2. Categories going maximum 2 deep like Parent->child 1->child 1 childs

What I try to do

update category_id column when I drop and drop one of my categories by Ajax

Issues

1. I'm getting 404 error on network
2. My function doesn't support null category_id

Codes

@foreach($Categorys as $cat)
//parent (deep 0)
<li class="parent" id="{{$cat->id}}">
{{$cat->title}}

//first child (deep 1)
@if(count($cat->childs))
@foreach($cat->childs as $child)
<li style="margin-left:20px !important;" class="firstchild" id="{{$child->id}}">
{{$child->title}}

//first child child (deep 2)
@if(count($child->childs))
@foreach($child->childs as $childdd)
<li style="margin-left:40px !important;" class="secondchild" id="{{$childdd->id}}">
{{$childdd->title}}
</li>
@endforeach

@endif
</li>
@endforeach

@endif
</li>
@endforeach

Ajax

$(function() {
    $('.mytest').sortable({
        stop: function() {
            $.map($(this).find('li'), function(el) {
                var itemID = el.id;
                var itemIndex = $(el).index();


                if (itemID) {
                    $.ajax({
                        url: '{{ url('
                        categorysort ') }}/' + encodeURI(itemID),
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            itemID: itemID,
                            itemIndex: itemIndex
                        },
                    });
                } else {
                    console.log(data);
                }

            });
        }
    });
});

route

Route::post('/categorysort/{id}','CategoryController@UpdatecategoryparentByAjax')->name('categorysort');

controller

public function UpdatecategoryparentByAjax(Request $request, $id)
    {
      $categories = Category::orderby('id', 'desc')->get();

      $itemID = $request->input('itemID');
      $itemIndex = $request->input('itemIndex');

      foreach ($categories as $category) {
        $category->where('id', $itemId)->update([
          'category_id' => $itemIndex,
        ]);
      }
    }

PS: I'm aware that there is missing category_id data in my li's the reason i didn't put that is because I didn't know how to should I use it exactly, as I mentioned before in my issues my function doesn't support that yet (so I need your helps please).

screenshot

Thanks.

Answer 1

It might be because you aren't protecting agaisnt csrf, which is mandatory when doing a post request so, as laravel docs explain you could solve by adding this to your html:

<meta name="csrf-token" content="{{ csrf_token() }}">

Then in your ajax you would only need to append it as a header.

$.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: '/categorysort/'+ itemID ,
        type: 'POST',
        dataType: 'json',
        data: {itemID: itemID, itemIndex: itemIndex},
      });

Also you are only recieving 1 id so I guess that what you are trying to do is sort depending on the parent, therefore you should only select the li with parent class, that way your controller will recieve 1 id instead of 2 because what you are doing right now is /categorysort/{parentId}/{childId} and what you would need is /categorysort/{id}, so instead of selecting all categories just select the top parent categories:

$.map($(this).find('.parent'), function(el)