使用Ajax進行Rails 3.2更新操作。

我正在嘗試爲Rails 3.2應用程序使用Ajax創建更新表單。我是一個Ajax初學者，所以我需要一些指導。我想實現的是：使用Ajax進行Rails 3.2更新操作。

1. The user presses a button and a form slides down from the top in a div. 
2. The user updates the form and presses "update". 
3. The parameters from the updated form is sent and saved to the database, and 
4. the form slides up again without making the user leave the page.

表單目前看起來是這樣的：

<%= form_for(@user, :remote => true) do |f| %> 
    <%= render 'shared/error_messages' %> 
    <%= f.fields_for :oak do |oak| %> 
    <%= oak.text_field :name, :placeholder => "Name" %> 
    <% end %> 
    <%= f.fields_for :energy_meter do |energy_meter| %> 
    <%= energy_meter.text_field :energy_meter_id, :placeholder => "Id" %> 
    <% end %> 
    <%= f.submit "Update!", "data-role" => "button", "data-theme" => "b", "return" => "false" %> 
<% end %>

我有一個目前看起來像這樣的更新操作：

def update 
    @user = current_user 
    @user.update_attributes(params[:user]) 
end

它位於我的UsersController。

我也有，目前看起來像這樣一個update.js.erb文件：

$(window.location.replace("/"))

我不知道我應該把update.js.erb做我想做什麼，也不知道怎樣去發送參數，它目前只重定向到/。我也想知道我的更新操作應該放在哪裏以及哪些內容中，它目前位於UsersController中，但是它應該位於我的表單所在的頁面控制器中嗎？

任何提示或指導將是偉大的！

謝謝。

來源

2012-05-07 Anders

添加以下代碼aaplication.js

$("#BUTTON_ELEMENT").live("click", function() { 
    $("#FORM_ELEMENT").slideDown(); 
}); 

$("#FORM_ELEMENT").live("submit", function() { 
    var _form = $(this); 
    $.post(_form.attr("action"), _form.serialize(), function() { _form.slideUp(); }, "script"); 
    return false; 
});

出於測試目的，添加一些警惕update.js.erb

來源

2012-05-07 09:31:23 Bongs

嗨，已經得到了警惕出現。但它重定向到/ users/1。我的更新操作當前如下所示：'def update @user = current_user respond_to do | format | @ user.update_attributes（params [：user]）format.js {render：layout => false} end end'。並顯示未定義的文本。 – Anders

確保你已經在'application.js'中給出了正確的'form id'，同時檢查控制檯在提交表單時發送了哪個請求（即JS或HTML）。 – Bongs

您應該respond_to塊添加到控制器並添加format.js，使該控制器將然後渲染update.js.erb文件。

你不需要這行：

$(window.location.replace("/"))

默認情況下，該URL不會在一個AJAX調用而變化。

來源

2012-05-07 09:52:06

出於某種原因，重定向到/ users/1。這就是爲什麼我添加了上述行。我不知道如何使它不重定向到該網址，它似乎像呈現我的update.js.erb文件。 – Anders

我想加入'事件。按鈕/鏈接上的preventDefault（）可能會阻止它重定向到/ users/1。請參閱：http://api.jquery.com/event.preventDefault/ –

林不知道這是否適用於這種情況下，但如果這是喜歡使用jQuery做一個搜索欄......我想你應該把這個代碼update.js.erb？

$('#DIV_ID').html('<%= escape_javascript(render("update")) %>');

其中，「更新」是包含表單和「#DIV_ID」的_update.html.erb文件是要呈現的形式股利。

也許這railscast可以幫助解釋它比我好，希望它幫助。 http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true

來源

2012-05-08 04:55:02 user1350443

使用Ajax進行Rails 3.2更新操作。

回答

相關問題