i m trying to build a sortable drag and drop list and the order must change everytime i drop the element in the his new area i m using ajax and laravel but when i drop the element i got the following error

POST http://localhost/pfe/public/prof/listpost 500 (Internal Server Error)

my route code

Route::post('prof/listpost','listsController@update');

my controller code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class listsController extends Controller
{
    public function showlist()
    {
        $lists=\App\Models\lists::orderby('order','ASC')->get();
        return view('questions.DragAndDrop',compact('lists'));
    }

    public function update(Request $request)
    {
        {
            $lists = lists::all();
    
            foreach ($lists as $list) {
                foreach ($request->order as $order) {
                    if ($order['id'] == $list->id) {
                        $list->update(['order' => $order['position']]);
                    }
                }
            }
            
            return response('Update Successfully.', 200);
        }
    }
}

my view code which include the ajax code too

@include ('header')
@include ('tableHeader')
<meta name="csrf-token" content="{{ csrf_token() }}">
  <!-- Content Wrapper. Contains page content -->
  <div >
    <!-- Content Header (Page header) -->
    <div >
      <div >
        <div >
          <div >
            <h1 >Subjects</h1>
          </div><!-- /.col -->
          <div >
            <ol >
              <li ><a href="{{route('dashboard')}}">Home</a></li>
              <li ><a href="{{route('adminShowProduits')}}">Produits</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    
     <section >
      <div >
        <div >
          <div >
            <div >
              <div >
                  <a href="{{route('ProfAddSubject')}}" > <i ></i> Add Subject </a>
                  <a href="#" > <i ></i> Filtrer</a>
                  <a href="#" > <i ></i> Exporter</a>
              </div>
              <!-- /.card-header -->
              <div >
                <table id="table" >
                  <thead>
                  <tr >
                    <th>name</th>
                    <th>order</th>
                  </tr>
                  </thead>
                  <tbody id="tablecontents">
                  @foreach ($lists as $list)
                   
                    <tr  data-id="{{ $list->id }}">
                      <td>{{$list->nom}}</td>
                      <td>{{$list->order}} </td>
                    </tr>
                  @endforeach
                  
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>name</th>
                    <th>order</th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>


 
  </div>
  <!-- /.content-wrapper -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
    <script type="text/javascript">
   $(function () {
        $("#table").DataTable();

        $( "#tablecontents" ).sortable({
          items: "tr",
          cursor: 'move',
          opacity: 0.6,
          update: function() {
              sendOrderToServer();
          }
        });
  function sendOrderToServer() {
          var order = [];
          var token = $('meta[name="csrf-token"]').attr('content');
          $('tr.row1').each(function(index,element) {
            order.push({
              id: $(this).attr('data-id'),
              position: index 1
            });
          });
          $.ajax({
            type: "POST", 
            dataType: "json", 
            url: "{{ url('prof/listpost') }}",
                data: {
              order: order,
              _token: token
            },
            success: function(response) {
                if (response.status == "success") {
                  console.log(response);
                } else {
                  console.log(response);
                }
            }
          });}  });
</script>




  @include ('footer')
  @include ('tableFooter')

CodePudding user response：

refactor update action like this:

public function update(Request $request)
{
   $lists = lists::all();

        foreach ($lists as $list) {
            foreach ($request->order as $order) {
                if ($order['id'] == $list->id) {
                    $list->update(['order' => $order['position']]);
                }
            }
        }
        
        return response('Update Successfully.', 200);
    
}

CodePudding user response：

If you want return json then you should use this:

return response()->json(['success' => 'Update Successfully.'], 200);