私の new.html.erb は正常に動作しています。
しかし、私の edit.html.erb では、3 つの既存の部門があるとしましょう...
部門の追加リンク (別のフィールドを追加するため) をクリックするたびに、既存の部門の下ではなく上に移動し続けます。
ところで、私の協会は、部門には多くの部門があり、部門は部門に属していると言っています。
私のコントローラーでは:新しいメソッドと編集メソッドがあります
def new
@division = Division.new
@division.departments.build
end
def edit
@division = Division.find(params[:id])
end
cocoon 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.html.erb で新しく追加されたフィールドが既存のフィールドの上にあるのはなぜだろうか