如何使用 Javascript/jQuery 使用新对象制作其他表单？

Posted 2023-05-09

【中文标题】如何使用 Javascript/jQuery 使用新对象制作其他表单？

【英文标题】：How to make additional forms with with new objects using Javascript/jQuery?

【发布时间】：2019-05-02 00:11:48

【问题描述】：

在初始页面加载时，将收集当前用户的所有亮点并将每个亮点放入一个表单中。这些表单稍后会在用户单击某个按钮后显示给用户。

不过，我试图解决的情况是，通过用户的交互过程，可以创建新的亮点。而这些新亮点也需要在同一系列表格中“准备”。

目前，我正在尝试使用一个巨大的 .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>");

【问题讨论】：

就像一般指针和旁注一样，研究使用脚本模板并从脚本中提取该标记。 ***.com/questions/4912586/…

【参考方案1】：

我能够通过改变我使用的方法来解决这个问题。

我没有让表单部分包含对@current_user_highlights 的调用，从而继续制作大量表单，而是将表单本身分解为一个单独的部分。这允许我稍后重用表单，根据与 update.js.erb 文件一起发送的突出显示“渲染”单个实例。

我还在幻灯片列表周围添加了一个额外的包装器，这让我可以更轻松地使用 .append() jQuery 函数。

生成的 update.js.erb 文件如下所示：

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