Блог

Главная - Вопросы по программированию - База данных, не распознающая динамически сгенерированные экземпляры модели в форме с использованием Cocoon

База данных, не распознающая динамически сгенерированные экземпляры модели в форме с использованием Cocoon

#javascript #jquery #css #ruby-on-rails #cocoon-gem

#javascript #jquery #css — код #ruby-on-rails #cocoon-gem

Вопрос:

Я почти закончил форму с использованием cocoon, которая управляет глубоко вложенными формами, которые должны динамически генерировать части формы. База данных настроена как визуализации has_many Rows, Строки has_many panes.

Теперь у меня это полностью работает. Но когда я добавляю свой стиль, это полностью нарушает форму, с тех пор я немного урезал стиль, чтобы попытаться найти проблему, но она все еще сохраняется. Я знаю, что проблема заключается в моем подмножестве формы cover_image, поскольку все, что касается строк и панелей, еще не было затронуто стилизацией.

 //Cover Image Upload Preview amp; Delete
$(function() {
  function readURL(input) {
    if (input.files amp;amp; 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>

Если бы кто-нибудь мог помочь мне определить проблему, я был бы очень признателен, поскольку я сузил круг поисков до этого места, но смотрю на это уже несколько часов и понятия не имею, почему это не работает.

Ответ №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>

Был за пределами этого подразделения. Глупая проблема, но она занимала меня несколько часов! Просто переместил мой <%= form_for @visualization, :html => {:multipart => true} do |f| %> на самый внешний div, и это работает.

Комментарии:

1. Это глупые жуки достают нас. Что-то, что помогло мне при отладке erb => html проблем, — это сначала проверить, что исходный код html, поступающий с сервера, соответствует моим ожиданиям, а затем проверить, что браузер отображает так, как я ожидаю (элемент проверки браузера). Когда сталкиваешься со странной проблемой, всегда лучше вернуться к самым основам и отбросить все предположения. «Вы пробовали выключать и включать его снова?» : D

Метки: