使用remotipart提交表单后呈现页面时nested_form出错

时间:2015-06-23 10:51:48

标签: ruby-on-rails ajax paperclip nested-forms remotipart

应用程序:

在我的Rails(v3.2.17)项目中,我有课程:

class User < ActiveRecord::Base
  has_many :photos, dependent: :destroy

  accepts_nested_attributes_for :photos, :allow_destroy => true
  attr_accessible photos_attributes

class Photo < ActiveRecord::Base
  belongs_to :user
  attr_accessible :name, :picture
  has_attached_file :picture, :styles => { :medium => "370x370#", :thumb => "120x120#" }

  validates :name, :presence => true

我使用paperclip来处理图片上传。

在用户表单中,我使用gem nested_form动态创建嵌套的照片表单。我的用户表单视图如下:

<%= simple_nested_form_for(@user, :remote => true) do |f| %>
  <%= f.error_notification %>

  <div id="photos">
    <%= f.fields_for(:photos) %>
  </div>

  <div class="add_new_photo_container">
    <%= f.link_to_add(:photos, {:id => "add_new_photo", :data => {:target => "#photos"}}) do %>
      Add photo
    <% end %>
  </div>

  <%= f.button(:submit, @user.new_record? ? 'create' : 'update', :id => "submit_form") %>
<% end %>

在nested_attribute照片的表单中,我有file_field。由于我想使用Ajax提交用户表单,并且无法通过ajax提交文件,我也使用remotipart gem来处理这个问题。我的photo_fields是这样的:

<%= f.link_to_remove(:class => "remove_photo_form") do %>

<%= f.file_field :picture, accept: 'image/png,image/gif,image/jpeg,image/jpg', :class => 'upload_picture'  %>
<%= f.input(:name) %>

我的控制器有create方法:

def create
  @user = User.new(params[:user])
  if @user.save
    respond_to do |format|
      format.js {}
    end
  else
    respond_to do |format|
      format.js { render 'reload_form' }
    end
  end
end

reload_form.js.erb就像:

$('#user_form').replaceWith("<%= j (render 'users/form') %>");

有什么作用:

成功案例,当我向用户提交许多照片并指定每张照片的名称时,确实可以正常运作。

错误情况,当我提交没有名称的照片(需要姓名存在)没有图片文件时,确实可以正常工作。表单是重新加载,错误显示在我的HTML中。这是Rails日志:

Started POST "/en/users" for 127.0.0.1 at 2015-06-23 22:31:18 -0300
Processing by UsersController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"RmKyaIap0fJlIECa65oj0PLncYqxyAJ0OzPc7H3eiZg=", "user"=>{"photos_attributes"=>{"0"=>{"_destroy"=>"false", "name"=>""}, "1"=>{"_destroy"=>"false", "name"=>""}}, "starts_at"=>"", "finishes_at"=>""}, "commit"=>"Create", "locale"=>"en"}

什么行不通:

错误情况,当我提交的照片没有名称但我上传图片文件时,不起作用。

在这种情况下,remotipart用于以ajax方式提交图片。但是从f.link_to_add重新加载nested_form时会出现某种错误。没有显示错误,但表单也没有重新加载。

这是Post的Rails日志,当它不起作用时:

Started POST "/en/users" for 127.0.0.1 at 2015-06-23 22:31:53 -0300
Processing by UsersController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"RmKyaIap0fJlIECa65oj0PLncYqxyAJ0OzPc7H3eiZg=", "user"=>{"photos_attributes"=>{"0"=>{"_destroy"=>"false", "name"=>"", "picture"=>#<ActionDispatch::Http::UploadedFile:0x43d5a40 @original_filename="avatar.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"user[photos_attributes][0][picture]\"; filename=\"avatar.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:C:/Users/EVEDOV~1/AppData/Local/Temp/RackMultipart20150623-1552-ka9clf>>}, "1"=>{"_destroy"=>"false", "name"=>""}}, "starts_at"=>"", "finishes_at"=>""}, "commit"=>"Create", "remotipart_submitted"=>"true", "X-Requested-With"=>"IFrame", "X-Http-Accept"=>"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01", "locale"=>"en"}

当我在Firebug控制台中启用各种错误的展示时,我就是这样:

Handler function DebuggerProgressListener.prototype.onStateChange threw an exception: [Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/webbrowser.js :: DPL_onStateChange :: line 1439" data: no]Line: 1439, column: 0
DevToolsUtils.js (linha 60)
<Sistema>

[Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: chrome://browser/content/browser.js :: TabsProgressListener.onStateChange :: line 13564" data: no]
tabbrowser.xml (linha 490)

TypeError: can't access dead object
htmlPanel.js (linha 1082, col 16)
<Sistema>

是否有人遇到任何类似的问题并知道如何修复它?

我还试图将nested_form替换为cocoon gem,但我遇到了同样的问题。

0 个答案:

没有答案