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

Question

我有一个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"

错误的流程如下所示:

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

希望我的问题是可以理解的.如果您有任何意见或需要澄清,请发表评论.我很满意所有的想法.

Answer 1

Ryan Bates在这个主题嵌套模型表格第2部分上做了很棒的Railscast .根据您的路由和模型关联,有许多交互依赖项,但此RailsCast看起来可以直接应用.

Answer 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% 确定这就是解决方案，因为问题的出现有些随机。