时间戳

首页 > 解决方案 > 如何使用 Javascript/jQuery 使用新对象制作其他表单？

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

问题描述

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

不过，我试图理清的场景是，通过用户的交互过程，可以创建新的亮点。而这些新亮点也需要在同一系列的形式中“准备”。

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

更新.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>");

标签： javascriptjqueryruby-on-railsforms

解决方案

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

我没有让表单部分包含对@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>");

推荐阅读