使用更新数据库

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

​

这是我的Jquery，用于更改名称和ajax：

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

结束

这是在我的routes.rb中：

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

Answer 1

您的代码在headers调用中缺少了ajax属性：

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

您还需要创建一个update.js.erb文件，以使您的update操作呈现。

更新

我还建议先更新数据库，然后(如果更新成功)更改页面上项目的名称，只需将success属性添加到ajax调用：

$.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文件中放置的任何内容。