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

Rails: Nested remote form doesn't work on page load

本文关键字：加载 不起作用 表单 嵌套 程表单 Rails      更新时间：2023-09-26

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

希望我的问题可以理解。如果您有任何意见或需要澄清，请发表评论。我对所有想法都很感兴趣。

Ryan Bates 在这个主题上做了一个很棒的 Railscast，嵌套模型表单第 2 部分。有许多交互依赖关系，具体取决于您的路由和模型关联，但此 RailsCast 看起来直接适用。

我很

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

相关文章：