Laravel 5.2 jQuery UIカテゴリ内の並べ替え可能な投稿

Question

私はシステムを学ぶためにLaravel v5.2でブログを構築しています。 jQuery UI Sortableを使いたかったのです。しかし、私が試してリストをソートするたびに、Chromeのコンソールに「POST http://localhost:3000/posts/reposition 500（内部サーバーエラー）」が返されます。

私はjQuery UI Sortable, then write order into a databaseを見ましたが、まだ動作させることはできません。

なぜ私が（内部サーバーエラー）を取得しているかを見ています。私はLaravelが新しく、更新方法が間違っているのか、それとも間違っているのか分からない。

ありがとうございます！ここで

は私のコードです：

コントローラー：

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

ビュー：

​​

出力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> 

ルート：

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

Answer 1

ので、@ Volatil3の助けといくつかのランダムなグーグルで、私は最終的にそれが動作するようになりました。

<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>