0

The Application:

In my Rails (v3.2.17) project I have classes:

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

  accepts_nested_attributes_for :photos, :allow_destroy => true
  attr_accessible photos_attributes

and:

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

  validates :name, :presence => true

I use paperclip to handle the picture upload.

In the user form, I use the gem nested_form to dynamically create nested photo forms. My user form view goes like this:

<%= 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 %>

Inside the form for nested_attribute photo, I have the file_field. As I want to submit user form using Ajax, and files can not be submitted through ajax, I am also using remotipart gem to handle this. My photo_fields is like this:

<%= 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) %>

My controller has the create method:

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

And reload_form.js.erb goes like:

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

What does work:

The success case, when I submit User with many photos and specify the name for each photo, does work perfectly.

The error case, when I do submit photos without name (name presence is required) but also without the picture file, does work fine. The form is reload and errors are showed in my html. This is the Rails log:

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"}

What does not work:

The error case, when I do submit photos without name but I upload the picture file, does NOT work.

In this case, remotipart acts to submit the picture in an ajax manner. But there is some sort of error when reloading the f.link_to_add from nested_form. No errors are showed, but the form do not reload either.

And this is the Rails log of Post when it does not work:

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"}

When I enable exhibition of all kind of errors in Firebug console, that's what I see:

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>

Does anyone have faced any similar problem and knows how to fix it?

I have also tried to replace nested_form by cocoon gem, but I fall into the same problem.

evedovelli
  • 2,115
  • 28
  • 28
  • Have you seen [this](http://www.alfajango.com/blog/rails-js-erb-remote-response-not-executing/)? It is possible you are getting a JS error and are not seeing it. – steve klein Jun 23 '15 at 11:25
  • Thanks for the help Steve. I just checked your link and verified that the request contains "as JS" (I have updated the question with the log), but yet, there is nothing appearing at the firebug console when I do submit the form. – evedovelli Jun 24 '15 at 01:46
  • However, if I do comment out the lines: <%= f.link_to_add(:photos, {:id => "add_new_photo", :data => {:target => "#photos"}}) do %> Add photo <% end %> from my view, the it does work properly, but I cannot add nested forms for photos dynamically. – evedovelli Jun 24 '15 at 01:48

0 Answers0