cocoon nested_form在edit.html.erb中的現有對象上方添加字段，而不是

Question

我的new.html.erb工作正常。

但在我edit.html.erb，讓我們說我有3個現有部門...

每當我點擊添加部門鏈接（添加另一個字段），它使上面，而不是現有的部門去低於。

順便說一句，我的協會說，該科有很多部門和部門屬於師。

在我的控制器：還有我的新的編輯方法

def new 
    @division = Division.new 
    @division.departments.build 
    end 

def edit 
    @division = Division.find(params[:id]) 

    end 

我需要繭js文件，所以我使用的是默認，而不是覆蓋別的東西。

cocoon.js

(function($) { 

    function replace_in_content(content, regexp_str, with_str) { 
    reg_exp = new RegExp(regexp_str); 
    content.replace(reg_exp, with_str); 
    } 

    function trigger_removal_callback(node) { 
    node.parent().parent().trigger('removal-callback'); 
    } 

    $('.add_fields').live('click', function(e) { 
    e.preventDefault(); 
    var $this     = $(this), 
     assoc     = $this.data('association'), 
     assocs    = $this.data('associations'), 
     content    = $this.data('template'), 
     insertionMethod  = $this.data('association-insertion-method') || $this.data('association-insertion-position') || 'before'; 
     insertionNode   = $this.data('association-insertion-node'), 
     insertionCallback  = $this.data('insertion-callback'), 
     removalCallback  = $this.data('removal-callback'), 
     regexp_braced   = new RegExp('\\[new_' + assoc + '\\]', 'g'), 
     regexp_underscord  = new RegExp('_new_' + assoc + '_', 'g'), 
     new_id    = new Date().getTime(), 
     newcontent_braced  = '[' + new_id + ']', 
     newcontent_underscord = '_' + new_id + '_', 
     new_content   = content.replace(regexp_braced, '[' + new_id + ']'); 

    if (new_content == content) { 
     regexp_braced  = new RegExp('\\[new_' + assocs + '\\]', 'g'); 
     regexp_underscord = new RegExp('_new_' + assocs + '_', 'g'); 
     new_content  = content.replace(regexp_braced, '[' + new_id + ']'); 
    } 

    new_content = new_content.replace(regexp_underscord, newcontent_underscord); 

    if (insertionNode){ 
     insertionNode = insertionNode == "this" ? $this : $(insertionNode); 
    } else { 
     insertionNode = $this.parent(); 
    } 

    var contentNode = $(new_content); 

    // allow any of the jquery dom manipulation methods (after, before, append, prepend, etc) 
    // to be called on the node. allows the insertion node to be the parent of the inserted 
    // code and doesn't force it to be a sibling like after/before does. default: 'before' 
    insertionNode[insertionMethod](contentNode); 

    $this.parent().trigger('insertion-callback'); 
    }); 

    $('.remove_fields.dynamic').live('click', function(e) { 
    var $this = $(this); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.closest(".nested-fields").remove(); 
    }); 

    $('.remove_fields.existing').live('click', function(e) { 
    var $this = $(this); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.prev("input[type=hidden]").val("1"); 
    $this.closest(".nested-fields").hide(); 
    }); 

})(jQuery); 

在我_form.html.erb

<div class="new-div-box"> 
<%= simple_form_for [:admin, @division] do |f| %> 
    <%= f.input :name, :label => "Division Name"%> 

<div> 
<div> 

    <%= f.simple_fields_for :departments do |department| %> 
    <%= render 'department_fields', :f => department %> 

    <% end %> 
</div> 
    <%=link_to_add_association "Add Department", f, :departments,class: "btn btn-inverse" %> 
</div> 

    <%= f.submit :class=>"btn btn-primary submit_btn_division" %> 

<% end %> 

</div> 

和我呈現的一個是_department_fields.html.erb

<div class="nested-fields"> 
    <%= f.input :name, :label => "Department Name" %> 
    <%= link_to_remove_association raw("<img src='../../../assets/remove.png' width='25px' height='25px'>"), f %> 
</div> 

我想知道爲什麼新添加的字段超出了我的edit.htm中現有的字段l.erb

Answer 1

我認爲它查找與關聯的div作爲包裝嵌套字段的id。

所以你的觀點

<div id="departments"> 
    <%= f.simple_fields_for :departments do |department| %> 
    <%= render 'department_fields', :f => department %> 
    <% end %> 
    <div class="links"> 
    <%=link_to_add_association "Add Department", f, :departments,class: "btn btn-inverse" %> 
    </div> 
</div> 

Answer 2

@ spullen的解決方案的工作，但他的推理是不正確的。如果您跟蹤直通coccon的代碼，你會遇到這樣的事情

var getInsertionNodeElem = function(insertionNode, insertionTraversal, $this){ 
    if (!insertionNode){ 
     return $this.parent(); 
    } 
    ... 
} 

，然後我相信這var addedContent = insertionNodeElem[insertionMethod](contentNode);在新的節點增加。

重點是新的部分將插入link_to_add_association的父節點上方。所以link_to_add_association的<a>元素和新的輸入字段的容器節點將是兄弟。

如果要插入的部分在下面，link_to_add_association必須包裝在它自己的div中。例如：

<div id="workout-fields"> 
    <%= f.simple_fields_for :workouts, validate: true do |workout| %> 
     <%= render partial: 'shared/workout/form', locals: {f: workout, show_remove: false} %> 
    <% end %> 
    <div><%= link_to_add_association 'add workout', f, :workouts, partial: 'shared/workout/form'%></div> <!-- this wrapper is IMPORTANT for insertion ordering --> 
    </div>