javascript - 数据库无法识别使用 Cocoon 形式动态生成的模型实例

Question

我几乎完成了一个使用 cocoon 的表单，该表单管理需要动态生成表单的各个部分的深度嵌套表单。数据库设置为 Visualizations has_many Rows，Rows has_many panes。

现在，我已经完全正常工作了。但是当我添加我的样式时，它完全破坏了形式，我已经剥离了相当多的样式以试图找到问题，但它仍然存在。我知道问题出在我的 cover_image 表单子(monad)集中，因为与行和 Pane 相关的所有内容都尚未涉及样式。

//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 {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	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

以防万一以后有人想知道(甚至不确定 cocoon 是否已被广泛使用 :)

这是 <%= form_for @visualization, :html => {:multipart => true} do |f| %> 的问题在一个 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>

在那个 div 之外。愚蠢的问题，但它让我花了几个小时!刚搬了我的<%= form_for @visualization, :html => {:multipart => true} do |f| %>到最外层的 div 就可以了。