使用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更新數據庫

回答

相關問題