neanderslob
neanderslob

Reputation: 2693

Error removing nested fields in remote form with cocoon

I have a simple_form with remote: true. I'm adding nested fields to it (people for this example) with cocoon.

<%= simple_form_for @incorporation, html: {id:"incorporationform"}, remote: true, update: { success: "response", failure: "error"} do |f| %>
    <%= f.simple_fields_for :company do |company| %>
        <div id="people" class="form_section">
            <div class="form-right">
                <div id="dynamic-person" class="dynamic-entity level1 person entityAttributes">
                    <%= company.simple_fields_for :people do |person|%>
                        <%= render 'person_fields', f: person %>
                    <% end %>
                    <div><%= link_to_add_association 'Add Person', company, :people, class: "btn btn-default add-button" %></div>
                </div>
            </div>
        </div>

This all works very well except under a particular circumstance. If I'm editing a form that's previously been saved to the database with a few people on it, I cannot perform the following sequence of activities:

  1. Remove a person with link_to_remove_association
  2. Save changes via ajax (remember, remote: true)
  3. Make ANY other changes
  4. Save via ajax again

Everything works until I try to perform that second save, at which point I'm confronted with the following error:

19:19:38 web.1  | ActiveRecord::RecordNotFound (Couldn't find Person with ID=33 for Company with ID=1):

The Person with ID=33 refers to the person I removed in step 1. When I check the people table, in my database. Person 33 is indeed gone (indicating that my save in step 2 was good). My interpretation of what's going on is that after saving the removal, the remote form forgets that Person 33 is gone and goes looking for him on the next save.

To be absolutely clear, there is no issue if remote: false OR if I refresh the page between steps 2 & 3.

Anyone have a guess at a solution for this? Many thanks in advance to anyone who gives it a shot.

Edit
Upon further research, it appears that cocoon is really not built to handle ajax submissions. However it seems that this can be gotten around by replacing elements in the dom asynchronously. The comment only provides a summary of the process used. I'm guessing that they did something like <%= escape_javascript(render(:partial => _person_fields.html.erb)) %> However I'm unfamiliar asynchronous rendering of partials. I imagine that I would have to remove the current partial from the dom and then load a new version of it. Is this the right idea? If so, what's the best way to remove the old partial, just straight jquery?

Upvotes: 1

Views: 284

Answers (0)

Related Questions