Jquery Ajax Ruby on Railsを使用してデータベースを更新

Question

私は編集したい名前のリストアイテムを持っています。 .editActivityボタンをクリックすると、Jqueryを使用して、うまく動作するリスト項目の名前を変更します。私はデータベース内の名前を更新するためにJqueryのAjaxを使いたいと思います。 activities_controller.rbまたはroutes.rbで問題が発生しているようですが、わかりません。

<ul class="list-group-sortable" id="Activities" > 
<h1 align = "center">Activities</h1> 

    <!-- List each activity in database --> 
    <% @activities.each do |activity| %> 
    <li class="list-group-item" id="item" style="list-style: none;"> 

     <label class="my_label"><%= activity.a_name %></label> 

     <!-- Edit activity --> 
    <!-- link_to 'edit activity', edit_activity_path(activity) do %>--> 
      <button class="editActivity" style="border:none; padding:0; background-color: transparent"> 
      <i class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i> 
      </button> 
    <!-- end %>--> 

    </li> <!-- End of list item --> 
    <% end %> <!-- End of if statement --> 
    <% end %> <!-- End of activity loop --> 

これは名前とAjaxを変更するための私のjQueryのです：

//Edit Activity 
$('#Activities li .editActivity').click(function() { 
    var name = $(this).closest('li').text(); 
    $('span').text("text is: " + name); 
    var input = $('<input id="attribute" class="textbox" type="text" value="' + name + '" />') 
    $(this).closest('li').append(input); 
    input.select(); 
    input.blur(function(event) { 
     var text = $('input:text').val(); 
     $(event.target).closest('li').find('label').text(text); 
     $('#attribute').remove(); //removes the newly created text box 

      //ajax request to update database 
     $(document).ajaxError(function(){ 
      alert("Error with AJAX call!"); 
      alert($(this).closest('li').attr('id')); 
     }); 

     $.ajax({ 
      method: 'PUT', 
      url: '/activities/' + id, 
      data: { a_name: text} 
     }); 

    }); 
}); 

これは私のactivities_controllerの私の更新アクションです：

def update 
@activity = Activity.find(params[:id]) 
@activity.update_attributes(:a_name) 
respond_to do |format| 
    format.js {} 
end 

エンド

ティsが私のroutes.rbをしている：

$.ajax({ 
    headers: { 
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
    }, 
    method: 'PUT', 
    url: '/activities/' + id, 
    data: { a_name: text } 
}); 

をそして、あなたはまた、レンダリングするためにあなたのupdateアクションのupdate.js.erbファイルを作成する必要があります。

put '/activities/:id' => 'activities#update' 

Answer 1

あなたのコードはajax呼び出しでheaders属性が欠落しています。

UPDATE

私もちょうどajaxコールにsuccess属性を追加し、（更新が成功した場合）、ページ上の項目の名前を変更し、最初にデータベースを更新することをお勧めとなります

$.ajax({ 
    headers: { 
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
    }, 
    method: 'PUT', 
    url: '/activities/' + id, 
    data: { a_name: text }, 
    success: function(response) { 
    // update item name here 
    } 
}); 

responseには、update.js.erbファイルに貼った内容がすべて含まれます。