在 Rails 4 中提交 AJAX 请求时出现问题

Question

我一直关注 http://blog.markhorgan.com/?p=522 作为指南，以使用 ajax 回调更新表单中的图像。图片保存得很好，但我想做一些聪明的 ajax，这样页面就不会刷新。

这是我的代码：

edit.html.haml：

  #promo-image
     = render partial: 'promo_image' 

_promo_image.html.haml：

= form_for( @property, remote: true) do |f|
  = f.file_field :promo_image, :pattern => "^.+?\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$", :id => 'promo-image-upload'
  = f.submit 'Update'
= image_tag @property.promo_image.url(:medium)

properties_controller.rb

def update
 @property = Property.find(params[:id])

 if @property.update(property_params)
   format.js
 else
   render 'edit'
 end
end

更新.js.haml：

$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");

使用上面概述的代码，我得到指向 format.js 行的错误：

PropertiesController 中的ArgumentError#update too little arguments

谁能看出我哪里出错了，或者指出我正确的方向？

非常感谢！ 史蒂夫

更新

为了清楚起见，我希望能够更新此处所述的 Div：

更新.js.haml：

$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");

此代码有效，但会刷新整个页面：

respond_to do |format|
  format.html { redirect_to edit_property_path(@property) } 
  format.js
end   

进一步更新

为了明确我的动机，我希望能够更新编辑页面上的元素，而不是被重定向到不同的元素，例如显示或索引。这是出于 UI 原因。上面的指南谈到了完全相同的事情。

最终更新

问题是因为我使用的是文件上传，这无法通过 ajax 实现。对于那些处于类似情况的人，请参见此处：Rails form_for with file_field and remote => true and format => :js

这里可能有一个解决方案，我将对此进行调查：https://github.com/JangoSteve/remotipart

感谢大家帮助我解决我的方法错误！

Answer 1

关于您的第一次更新，您说此代码有效，但刷新了页面：

respond_to do |format|
  format.html { redirect_to edit_property_path(@property) } 
  format.js
end

如果是这样，这意味着传入的请求是 html 请求，而不是 AJAX 请求。因此 format.html 块运行并将浏览器重定向到同一页面，该页面现在具有更新的图像。

您需要做的是弄清楚为什么页面没有将请求作为 AJAX 发送。如果您查看终端输出（如果在本地运行），您可以看到请求格式。它会说：

Processing by ControllerName#action as [format]

格式必须是 JS 才能让 format.js 呈现 update.js.haml。

更新：

既然您提到它，问题确实是 file_upload 字段。使用表单助手实际上无法使用 AJAX 上传文件。见docs：

与其他表单不同，制作异步文件上传表单不像为 form_for 提供 remote: true 那样简单。对于 Ajax 表单，序列化是由在浏览器中运行的 JavaScript 完成的，由于 JavaScript 无法从您的硬盘读取文件，因此无法上传文件。最常见的解决方法是使用不可见的 iframe 作为表单提交的目标。

我在谷歌上快速搜索了一下，找到了remotipart gem，它似乎专门做这个。不过我没有任何经验，所以从这里开始你就靠自己了。 :)

Answer 2

尝试将您的 update 操作更改为

def update
  @property = Property.find(params[:id])

 if @property.update(property_params)

    respond_to do |format|
      format.html { redirect_to properties_path } 
      format.js
    end
  else
    render 'edit'
  end
end

Source