Laravel 5.2 jQuery UI Sortierbare Beiträge in Kategorie

Question

Ich baue ein Blog in Laravel v5.2, nur um das System zu lernen. Ich wollte jQuery UI Sortable verwenden. Jedes Mal, wenn ich versuche, die Liste zu sortieren, wird jedoch "POST http://localhost:3000/posts/reposition 500 (Interner Serverfehler)" in der Chrome-Konsole zurückgegeben.

Ich habe einen Blick auf jQuery UI Sortable, then write order into a database aber ich kann es immer noch nicht zur Arbeit bekommen.

Ich sehe, um zu sehen, warum ich bekomme (Interner Serverfehler). Ich bin neu bei Laravel und bin mir nicht sicher, ob meine Update-Methode falsch ist oder ob ich es falsch mache.

Vielen Dank im Voraus!

Hier ist mein Code:

Controller:

public function sort($cat_id) 
    { 
     $posts = DB::table('posts')->where('category_id', '=', $cat_id)->orderBy('position', 'ASC')->get(); 

     return view('posts.sort')->with('posts', $posts)->with('cat_id', $cat_id); 
    } 


    public function reposition() 
    { 
     $i = 0; 

     foreach ($_POST['item'] as $value) { 
      // Execute statement: 
      // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value 
      $i++; 
      DB::table('posts')->where('id', '=', $value)->update([ 'position' => $i ]); 
     } 
    } 

Ausblick:

 <ul class='sort-post-list' style="list-style:none;"> 
      @foreach($posts as $post) 
       <li id="item-{{ $post->id }}">{{ $post->title }}</li> 
      @endforeach 
     </ul> 

     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script> 
      $('.sort-post-list').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: '{{ route('posts.reposition') }}' 
        }); 
       } 
      }); 
     </script> 

ausgegeben HT ML:

<ul class='sort-post-list' style="list-style:none;"> 
    <li id="item-1">Introduction and Approach to Materials</li> 
    <li id="item-2">Teaching Philosophy</li> 
    <li id="item-3">Acknowledgements</li> 
</ul> 

<script> 
    $('.sort-post-list').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: '//localhost:3000/posts/reposition' 
      }); 
     } 
    }); 
</script> 

Routen:

Route::get('posts/sort/{cat_id}', [ 'uses' => 'PostController@sort', 'as' => 'posts.sort' ]); 
Route::post('posts/reposition', [ 'uses' => 'PostController@reposition', 'as' => 'posts.reposition' ]); 

Answer 1

Also mit @ Volatil3 Hilfe und einige zufällige googeln, ich habe es endlich zu arbeiten.

<script> 
    var getXsrfToken = function() { 
     var cookies = document.cookie.split(';'); 
     var token = ''; 

     for (var i = 0; i < cookies.length; i++) { 
      var cookie = cookies[i].split('='); 
      if (cookie[0] == 'XSRF-TOKEN') { 
       token = decodeURIComponent(cookie[1]); 
      } 
     } 

     return token; 
    }; 
    $.ajaxSetup({ 
     headers: { 
      'X-XSRF-TOKEN': getXsrfToken() 
     } 
    }); 
    $('.sort-post-list').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: '{{ route('posts.reposition') }}' 
      }); 
     } 
    }); 
</script>