使用 RJS 注入后将 JavaScript 处理程序添加到远程表单对象

Question

我有一个页面表单，我希望用户通过单击远程链接（“添加照片”，例如）来添加嵌套表单。单击按钮后，我使用 RJS 注入嵌套表单。注入的表单是远程表单，但注入后，表单没有附加 javascript 事件，因此它们只是使用 http 提交到嵌套对象的控制器。除此之外，一切正常。

我的问题是：

注入后是否可以通过 RJS 触发远程表单的 javascript 重新验证？

这样我的嵌套表单将获得正确的 javascript 事件处理并使用 AJAX 提交。

我的页面表单 (_form.html.erb)：

<% javascript 'ckeditor/ckeditor' %>

<%= form_for @page, :html => { :multipart => true } do |f| %>
  <%= f.error_messages %>
  <p>
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </p>
  <p>
    <%= f.label :homepage %><br />
    <%= f.check_box :homepage %>
  </p>
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.label :description %><br />
    <%= f.text_area :description, :rows => 5, :cols => 80 %>
  </p>
  <p>
    <%= f.label :text %><br />
    <%= f.text_area :text, :class => 'html' %>
  </p>
  <p>
    <%= f.label :picture_class %><br />
    <%= f.select :picture_class, ['left','right','full'] %>
  </p>

 <% unless @page.new_record? %>
  <h2>Photos</h2>
  <%= link_to 'Add photo', add_photo_page_url(@page), :remote => true %>
  <div id="photos">
  <%= render :partial => 'shared/forms/photo', :collection => @page.photos %>
  </div>
  <h2>Snippets</h2>
  <%= link_to 'Add snippet', add_snippet_page_url(@page), :remote => true %>
  <div id="snippets">
  <%= render :partial => 'shared/forms/photo', :collection => @page.snippets %>
  </div>
  <h2>Downloads</h2>
  <%= link_to 'Add download', add_download_page_url(@page), :remote => true %>
  <div id="downloads">
  <%= render :partial => 'shared/forms/download', :collection => @page.downloads %>
  </div>
  <h2>Paragraphs</h2>
  <%= link_to 'Add paragraph', add_paragraph_page_url(@page), :remote => true %>
  <div id="paragraphs">
  <%= render :partial => 'shared/forms/paragraph', :collection => @page.paragraphs %>
  </div>
 <% end %>

  <p><%= f.submit %></p>
<% end %>

<%= javascript_tag 'CKEDITOR.replaceAll("html");' %>

用于构建嵌套照片对象的控制器代码：(page_controller.rb)：

def add_photo
  @page = Page.find(params[:id])
  @photo = @page.photos.build
end

通过单击“添加照片”执行的 RJS 代码 (add_photo.js.rjs)：

page.insert_html :bottom, :photos, :partial => 'shared/forms/photo', :object => @photo
page.visual_effect :highlight, :photos, :duration => 2

该部分/表单注入 RJS (_photo.html.erb)：

<%= form_for [@page, photo], :remote => true do |f| %>
<p>
  <%= f.check_box :active %>
  <%= f.text_field :name %>
  <%= f.file_field :photo %>
  <%= f.submit 'Save' %>
</p>
<% end %>

任何帮助将不胜感激。我想用嵌套表单（不是嵌套属性）和 RJS 来解决这个问题，但无法通过 google 搜索到有关此问题的文档。

谢谢！！

——雅各布

Answer 1

如果您想坚持使用 RJS，则需要查看内置的 javascript 以了解它们如何注册所有内容。他们可能只是在 DOM 就绪时执行此操作并绑定到 Submit() 事件。它很可能封装在一个方法中，该方法查找标记为 :remote => 的任何内容。 true 并绑定到submit() 事件，因此它将通过AJAX 提交。您可以执行相同的逻辑，但将其隔离到新表单中。因此，也许您的部分可能有一个 JavaScript 标记，它根据 id 或类名执行该表单的逻辑，忽略除最近添加的表单之外的所有内容。