使用Jquery Ajax Ruby on Rails更新数据库

我有一个列表项，其中包含我想要编辑的名称。当我的.editActivity按钮被点击时，我使用Jquery来改变列表项的名字，这很好用。我想用Jquery的Ajax来更新我的数据库中的名称。我觉得问题发生在我的activities_controller.rb或routes.rb但不确定。使用Jquery Ajax Ruby on Rails更新数据库

<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

末

氏s是在我的routes.rb：

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

来源

2017-04-12 KOTrev

'update.js.erb'文件包含在ajax调用成功后会呈现的javascript内容（它与'update.html.erb'类似，但是对于JavaScript）。内容取决于你执行'ajax'后你想做什么。 – Gerry

您的代码缺少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行动来呈现。

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文件所做的任何设置。

来源

2017-04-12 23:40:27 Gerry

使用Jquery Ajax Ruby on Rails更新数据库

回答

相关问题