データベースは動的に生成されたモデルのインスタンスをCocoonを使用してフォームで認識しません

Question

フォームの一部を動的に生成する必要のある深くネストされたフォームを管理するcocoonを使用してフォームをほぼ完成させました。データベースは、可視化has_many Rows、行has_manyペインとして設定されます。

今、これは完全に機能しています。しかし、私がスタイリングを追加すると、フォームが完全に破られてしまいました。それ以来、私はかなりのスタイリングを取り除いて問題を見つけ出しましたが、それでも変わりません。私は問題がcover_image形式のサブセット内にあることを知っています。なぜなら、行とペインに関連するすべてがまだスタイリングで触れられていないからです。

//Cover Image Upload Preview & Delete 
 
$(function() { 
 
    function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
     $('#img_preview').attr('src', e.target.result); 
 
     } 
 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
    } 
 

 
    $("#visualization_cover_image").change(function(){ 
 
    $('#img_preview').removeClass('hidden'); 
 
    readURL(this); 
 
    }); 
 
}); 
 

 
//Displays cover image preview after file has been selected from desktop 
 
$(function(){ 
 
    $('input#visualization_cover_image').click(function() { 
 
    $('.img_prev').css({"display":"block"}) 
 
    $('#trash-can_cover').css({"display":"none"}) 
 
    }); 
 
}); 
 

 
//Displays Title box for input 
 
$(function(){ 
 
    $('label#text_preview').click(function() { 
 
    $('.inputtext').css({"display":"inline-block"}); 
 
    $('label#text_preview').hide(); 
 
    }); 
 
});

//image_form.scss 
 

 
label:hover { 
 
    color: black; 
 
    text-decoration: underline; 
 
} 
 

 
.inputfile { 
 
\t width: 0.1px; 
 
\t height: 0.1px; 
 
\t opacity: 0; 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t z-index: -1; 
 
} 
 

 
.inputfile + label { 
 
    margin-top: 3.5em; 
 
    font-size: 1.2em; 
 
    color: white; 
 
    display: inline-block; 
 
    padding-left: 10%; 
 
} 
 

 
.inputfile:focus + label, 
 
.inputfile + label:hover { 
 
    color: black; 
 
    text-decoration: underline; 
 
} 
 

 
.pre_img_prev { 
 
width: 1200px; 
 
height: 170px; 
 
position: relative; 
 
overflow: hidden; 
 
background-color: #ADADAD; 
 
color: #ecf0f1; 
 
} 
 

 
.gray_bar { 
 
    float: left; 
 
    width: 1.7em; 
 
    height: 100em; 
 
    background-color: #828282; 
 
} 
 

 
.img_prev { 
 
    display: none; 
 
    position: relative; 
 
} 
 

 
#img_preview { 
 
left: 0; 
 
top: 0; 
 
width: 100em; 
 
height: 100em; 
 
position: absolute; 
 
} 
 

 
#text_preview { 
 
margin-top: 2.3em; 
 
font-size: 1.2em; 
 
color: white; 
 
display: inline-block; 
 
position: relative; 
 
} 
 

 

 
.inputtext { 
 
    display: none; 
 
    background: transparent; 
 
    top: 4.2em; 
 
    right: 25em; 
 
    width: 200px; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.inputtext:focus { 
 
    background: transparent; 
 
} 
 

 

 
.inputtext + label { 
 
    padding-top: 24px; 
 
    color: white; 
 
    display: inline; 
 

 
}

<div class="try"> 
 
    <div class="breadcrumb-wrapper"> 
 
    <ul class="breadcrumbs"> 
 
     <li> 
 
      placeholder 
 
     </li> 
 
     </ul> 
 
     <%= form_for @visualization, :html => {:multipart => true} do |f| %> 
 
    </div> 
 
    <div class="cover_image text-center"> 
 
     <div class="row pre_img_prev"> 
 
     <div class="gray_bar"></div> 
 
     <div class="field img_prev"> 
 
      <img id="img_preview" src="#" alt="your image" class="img-thumbnail hidden text-center"/> 
 
      <%= f.label :title, "+ Add Title", id: "text_preview"%> 
 
      <%= f.text_field :title, name: "visualization[title]", id: "visualization[title]", class: "inputtext"%> 
 
      <div class="trash-can_title"> 
 
      <a href="#" id="trash-can_title"><i class="fa fa-trash fa-3x" aria-hidden="true"></i></a> 
 
      </div> 
 
     </div> 
 
     <div class="field"> 
 
      <%= f.label :cover_image, "+ Add Cover Image" %> 
 
      <%= f.file_field :cover_image, class: "inputfile" %> 
 
      <%= f.hidden_field :cover_image_cache %> 
 
     </div> 
 
     <div class="trash-can_cover"> 
 
      <a href="#" id="trash-can_cover"><i class="fa fa-trash fa-3x" aria-hidden="true"></i></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="rows" class="row"> 
 
     <%= f.fields_for :rows do |row| %> 
 
     <%= render 'row_fields', :f => row %> 
 
     <% end %> 
 
     <div class="links"> 
 
     <%= link_to_add_association "Add Row", f, :rows %> 
 
     </div> 
 
    </div> 
 
    <div class="actions"> 
 
     <%= f.submit %> 
 
    </div>

誰も私が私がここにそれを絞られているが、現在は数時間のために、このを凝視されているといないと私はそれを非常に感謝し、問題を発見助けることができればなぜそれが働いていないのかという手がかりを得ました。

Answer 1

誰にもわから繭はもうあまり使用されない（将来的には思っていただけで包み:)

それは<%= form_for @visualization, :html => {:multipart => true} do |f| %>は、後続のコード

<div id="rows" class="row"> 
 
     <%= f.fields_for :rows do |row| %> 
 
     <%= render 'row_fields', :f => row %> 
 
     <% end %> 
 
     <div class="links"> 
 
     <%= link_to_add_association "Add Row", f, :rows %> 
 
     </div> 
 
    </div> 
 
    <div class="actions"> 
 
     <%= f.submit %> 
 
    </div>

ながら、div要素内にあるとの問題でした

その部門外にいました。愚かな問題だが、それは数時間私を得た！ちょうど私の<%= form_for @visualization, :html => {:multipart => true} do |f| %>を最も外側のdivに移動し、それが動作します。