Rails 3.2 使用 Ajax 更新操作。答案

【问题标题】：Rails 3.2 update action with Ajax.Rails 3.2 使用 Ajax 更新操作。
【发布时间】：2012-05-07 07:59:48
【问题描述】：

我正在尝试使用 Ajax 为 Rails 3.2 应用程序创建更新表单。我是 Ajax 初学者，所以我需要一些指导。我想要实现的是：

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

它位于我的用户控制器中。

我还有一个 update.js.erb 文件，目前看起来像这样：

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

我不知道我应该把 update.js.erb 放什么来做我想做的事，也不知道如何发送参数，它目前只重定向到/。我还想知道我应该在更新操作中的位置和内容，它当前位于 UsersController 中，但它应该位于我的表单所在的 PagesController 中吗？

任何提示或指导都会很棒！

谢谢。

【问题讨论】：

标签： javascript ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

将以下代码添加到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添加一些警报

【讨论】：

您好，提醒已显示。但它重定向到/users/1。我的更新操作目前如下所示：def update @user = current_user respond_to do |format| @user.update_attributes(params[:user]) format.js { render :layout => false } end end。并显示未定义的文本。
确保您在application.js 中提供了正确的form id 并在控制台上检查提交表单时发送的请求（即JS 或HTML）。

【解决方案2】：

您应该将respond_to 块添加到控制器并添加format.js，以便控制器随后将呈现update.js.erb 文件。

你不需要这一行：

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

默认情况下，AJAX 调用时 URL 不会更改。

【讨论】：

由于某种原因确实重定向到 /users/1。这就是我添加上述行的原因。我不知道如何让它不重定向到那个 url，它似乎呈现了我的 update.js.erb 文件。
我认为在按钮/链接上添加event.preventDefault() 可能会阻止它重定向到/users/1。见：api.jquery.com/event.preventDefault

【解决方案3】：

我不确定这是否适用于这种情况，但如果这就像使用 jquery 制作搜索字段...我认为您应该将此代码放在 update.js.erb 中？

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

其中“update”是包含表单的 _update.html.erb 文件，“#DIV_ID”是您希望呈现表单的 div。

也许这个 railscast 可以比我更好地解释它，希望它有所帮助。 http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true

【讨论】：