Как сделать дополнительные формы с новыми объектами, используя Javascript / jQuery?

Question

При начальной загрузке страницы, все основные моменты текущего пользователя собраны, и каждый помещен в форму.Эти формы позже показываются пользователю, когда он нажимает на определенную кнопку.

Сценарий, который я пытаюсь разобрать, заключается в том, что в ходе взаимодействия с пользователем могут создаваться новые основные моменты.И эти новые основные моменты также должны быть «подготовлены» в одной и той же серии форм.

В данный момент я пытаюсь использовать гигантский метод .append (), но в фоновом режиме он не работает.

Есть указатели?Я подозреваю, что это может быть связано с неправильным управлением цитатами в вызове метода и / или неправильным использованием метода j-escape-javascript метода Rails ...

Есть ли лучший подход к сценарию?Я попытался «обновить» div с помощью вызова, чтобы сделать партиал.Хотя это и приводит к конечному результату отображения «текущих» данных, проблема в том, что связанный файл * .js становится «отключенным» от страницы, разрушая взаимодействия с пользователем.

Заранее благодарю за любую помощь или понимание, которое вы можете предложить!

_partial.html.erb Это то, что я пытаюсь «добавить к»

  <% @current_user_highlights.each do |highlight| %>
    <div class="slide">
      <%= form_for(highlight, remote: true) do |f| %>
        <%= f.fields_for :image_tags_attributes do |image_tag_fields| %>
          <%= image_tag_fields.fields_for :tag_content_attributes do |tag_content_attributes_fields| %>
            <%= image_tag highlight.file_url(:speck), data: { src: highlight.file_url(:medium),
                                                              id: highlight.id } %>
            <div class="wrapper">
              <%= tag_content_attributes_fields.text_field :content, class: 'form-control',
                                                                    id: "tag-content-field-#{highlight.id}" %>
                                                                    <%# id: "tag-content-field-#{highlight.parent_image.id}" %1> %>

              <div class="actions display-none">
                <%= button_tag "", type: 'submit',
                                  class: "btn btn-lg btn-default glyphicon glyphicon-ok above-interaction-barrier",
                                  id: "highlight-confirmation-submit-button-#{highlight.id}" %>
                <%= button_tag "", class: "btn btn-lg btn-default glyphicon glyphicon-remove above-interaction-barrier",
                                  id: "highlight-confirmation-remove-button-#{highlight.id}" %>
                <%= button_tag "Skip", class: "btn btn-med btn-default above-interaction-barrier display-none skip-button",
                                        id: "highlight-confirmation-skip-button-#{highlight.id}" %>
              </div>
            </div>
          <% end %>

          <%= image_tag_fields.fields_for :tag_title_attributes do |tag_title_attributes_fields| %>
            <%= tag_title_attributes_fields.hidden_field :title, value: highlight.tag_titles.first.title %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>

update.js.erb

$('#highlight-confirmation-wrapper div.slide:last').append(
  "<div= 'slide' <%= j form_for(@image.crops.last, remote: true) do |f| %>
    <%= f.fields_for :image_tags_attributes do |image_tag_fields| %>
      <%= image_tag_fields.fields_for :tag_content_attributes do |tag_content_attributes_fields| %>
        <%= image_tag @image.crops.last.file_url(:speck), data: { src: @image.crops.last.file_url(:medium),
                                                                  id: @image.crops.last.id } %>
        <div class="wrapper">
          <%= tag_content_attributes_fields.text_field :content, class: 'form-control',
                                                                id: "tag-content-field-#{@image.crops.last.id}" %>
                                                                <%# id: "tag-content-field-#{highlight.parent_image.id}" %1> %>

          <div class="actions display-none">
            <%= button_tag "", type: 'submit',
                              class: "btn btn-lg btn-default glyphicon glyphicon-ok above-interaction-barrier",
                              id: "highlight-confirmation-submit-button-#{@image.crops.last.id}" %>
            <%= button_tag "", class: "btn btn-lg btn-default glyphicon glyphicon-remove above-interaction-barrier",
                              id: "highlight-confirmation-remove-button-#{@image.crops.last.id}" %>
            <%= button_tag "Skip", class: "btn btn-med btn-default above-interaction-barrier display-none skip-button",
                                    id: "highlight-confirmation-skip-button-#{@image.crops.last.id}" %>
          </div>
        </div>
      <% end %>

      <%= image_tag_fields.fields_for :tag_title_attributes do |tag_title_attributes_fields| %>
        <%= tag_title_attributes_fields.hidden_field :title, value: @image.crops.last.tag_titles.first.title %>
      <% end %>
    <% end %>
  <% end %>
</div>");

Answer 1

Мне удалось разобраться в этом, изменив подход, который я использовал.

Вместо того, чтобы частичная форма включала вызов @current_user_highlights и, таким образом, приступила к созданию многочисленных форм, я вместо этого сломаласформировать себя в отдельный частичный.Это позволяет мне повторно использовать форму позже, чтобы «визуализировать» один экземпляр на основе выделенного фрагмента, который передается вместе с файлом update.js.erb.

Я также добавил дополнительную оболочку вокруг списка слайдовэто позволило мне более легко использовать функцию japu .append ().

Полученный файл update.js.erb выглядит примерно так:

$('#slides-wrapper').append("<div class='slide'> <%= j render 'tasks/highlight_confirmation_slide_form', highlight: @image.crops.last %> </div>");