Rails：嵌套的远程表单在页面加载时不起作用答案

【问题标题】：Rails: Nested remote form doesn't work on page loadRails：嵌套的远程表单在页面加载时不起作用
【发布时间】：2016-07-08 13:35:10
【问题描述】：

我有一个 Rails 应用程序，其中有一个看起来像这样的表单：

[ Parent list item 1 ]
[ Parent list item 2 ]
[ Parent list item 3 - expanded ]
    [ Child list item 1 ]
    Child inline input       Child submit button
    ------------------

[Parent input]
Parent submit button

父实体输入始终有效。它是一个远程表单，使用remote: true。当我添加一个父对象时，它会自动与其他父对象一起添加到列表中。每个父级可以有多个子级，当用户展开相应的父级列表项（如上例）时，会显示并列出它们。用户可以通过在Child inline input中输入一个值来添加更多的孩子，这个表单也是使用remote: true。

我遇到的问题是添加子元素并不总是在第一页加载时起作用。但是，如果我刷新页面，它会起作用。我很难理解为什么会这样。

当我创建父对象时，会呈现以下js.erb：

# screen_table_id is the list with parent objects.
# localized_strings/localized_string is the tr with the object
$("#screen_table_<%= @localized_string.screen.id %>").append("<%= j render   partial: 'localized_strings/localized_string', locals: { screen:  @localized_string.screen, localized_string: @localized_string }  %>");

# I use the best in place gem to manage inline editing
jQuery('.best_in_place').best_in_place()

localized_strings/localized_string 的相关部分如下所示：

%tbody{ id: "localized_string_parent_#{localized_string.id}"}
  %tr
    %td.expandable-column
      Clicking this reveals the child objects

/ The list of children is initially hidden
%tbody.hidden[localized_string]

  - if localized_string.translations.any?
    / Renders the children
  %tr
    / This form doesn't work on page load, after I have added the parent
    = render "translations/inline_form", app: localized_string.screen.app,  screen: localized_string.screen, localized_string: localized_string, translation:  localized_string.translations.build

而translations/inline_form 看起来像这样：

= form_for [app, screen, localized_string, translation], remote: true do |f|
  %td{ colspan: 2 }
    .inline-form-group
      = f.text_field :value, class: "form-control inline-form-control",  placeholder: "Translation value", id: "localized_string_input_# {localized_string.id}"

  %td
    / Sometimes nothing happens when I click Submit.
    = f.submit 'Add translation', class: "btn ban-success-outline"

故障流程如下所示：

页面加载和我创建一个父对象 (LocalizedString)
它已正确添加到列表中。
扩展新的父列表元素按预期工作。
当点击孩子 (Translation) 的提交按钮时，nothing.

希望我的问题可以理解。如果您有任何 cmets 或需要澄清，请发表评论。我对所有的想法都充满信心。

【问题讨论】：

标签： javascript jquery html ruby-on-rails ajax

【解决方案1】：

Ryan Bates 在这个主题上做了一个很棒的 Railscast Nested Model Form Part 2。根据您的路线和模型关联，有许多交互依赖项，但这个 RailsCast 看起来是直接适用的。

【讨论】：

谢谢！我去看看！
另外，由于您已经在使用 JS，请考虑使用 react 组件替换该功能。 react-rails gem 非常出色并且得到了很好的支持。此外，它还允许您使用可重用组件来定位像这样的特定 UI 元素，而无需像 Angular 那样走单页 JS 应用程序的路线。 Flow/Backbone 存储对于这个应用程序来说可能是多余的，但对于简单的组件，你可以使用 jQuery 的 ajax 在你的 react 组件中进行更新。

【解决方案2】：

我很确定我的问题是由无效的 HTML 引起的。我之前在tr 标签内渲染了表单，如下所示：

%tr
  = render "translations/inline_form", app: localized_string.screen.app,   screen: localized_string.screen, localized_string: localized_string, translation:   localized_string.translations.build

inline_form 以 form 本身开头。我没有这样做，而是尝试将其包装在 td 标记中，如下所示：

# inline_form.html.haml
%td{ colspan: 4 }
  # the form wasn't previously inside a td tag.
  = form_for [app, screen, localized_string, translation], remote: true,  style: "margin-bottom: 0" do |f|

在此之后我再也没有看到这个问题。但我不能 100% 确定它是解决方案，因为问题出现得有些随机。

【讨论】：