TODO ajaxでリストを更新する

Question

したがって、li項目をクリックすると、データベース内のフィールドcompletedを1または0に更新するajax呼び出しで、この簡単なToDoリストが作成されます。

私の見解のコードは、明らかに良くありません。そのコースはうまくいきません。初めてLiをクリックすると、更新されますが、data-completedが更新されないため、再実行したい場合は更新する必要があります。私はそれを行うためにjqueryが必要ですが、元の値に基づいてデータ属性を1または0に更新する方法がわかりません。

どのようにこの作業を正しく行うための指針をいただければ幸いです。

ビュー：

<li data-id='{!! $task->id !!}' data-completed='@if($task->completed == '1') 0 @else 1 @endif'> 

AJAXコール：

Route::get('api/tasks/update/{id}/{completed}', function($id, $completed) { 
    $task = App\Task::find($id); 

    $task->completed = $completed; 

    $task->save(); 
}); 

Answer 1

あなたがここに行う必要があるいくつかあります：

$('li').on('click', function(e){ 
    $.ajax({ 
     url: 'api/tasks/update/'+$(this).data('id')+'/'+$(this).data('completed'), 
     method: 'GET' 
    }) 
}); 

私はlaravelを使用しておりますので、これは私のルートがあります：

まず、n個

<li data-id='{!! $task->id !!}' data-completed='{{ $task->completed }}'> 

第二に、あなたのビューを更新できるように、あなたが更新されたタスクを返す必要があります：あなたはすでにあなたのビュー部分を簡略化することができるように、データベース内の0/1を保存している場合、あなたのif文をEED ：次に

Route::get('api/tasks/update/{id}/{completed}', function($id, $completed) { 
    $task = App\Task::find($id); 

    $task->completed = $completed; 

    $task->save(); 

    return response()->json($task); 
}); 

、更新taskが返されたとき、あなたはあなたのリストを更新できるように、あなたのAJAX呼び出しを更新：私もどうなる

$('li').on('click', function(e){ 
    var completed = (!$(this).data('completed') ? 1 : 0); 
    $.ajax({ 
     url: 'api/tasks/update/'+$(this).data('id')+'/'+$(this).data('completed'), 
     method: 'GET', 
     success: function(data) { 
      $(this).data('completed', data.completed); 
     }, 
    }) 
}); 

何かがあなたの経路Aを更新しています、

PHP

Route::post('api/tasks/update/{id}', function(Request $request, $id) { 
    $task = App\Task::find($id); 

    $completed = $request->input('completed'); 

    $task->completed = $completed; 

    $task->save(); 

    return response()->json($task); 
}); 

JS

$('li').on('click', function(e){ 
    $.ajax({ 
     url: 'api/tasks/update/'+$(this).data('id'), 
     data: {completed: (!$(this).data('completed') ? 1 : 0)}, 
     method: 'POST', 
     success: function(data) { 
      $(this).data('completed', data.completed); 
     }, 
    }) 
});