使用 jQuery 将 Rails 表单加载到表中

Question

这已经让我的项目死了几天了。
我有一个标准的价值观表；框架如下：

<table><tbody><tr><td>Stuff!</td></tr></tbody></table>

我正在尝试使用 jQuery 将内联 Rails 3 表单加载到 tbody 中，让用户向表中添加新值。这是通过一个按钮完成的，该按钮获取控制器的新操作，然后调用 new.js.erb，它只是将表单渲染的部分添加到表中 ($("table tbody").prepend(' <%= escape_javascript(render 'form') %>');)。

表单部分本身是这样的：

<tr>
  <td>
    <%= form_for @model, :remote => true do |f| %>
  </td>
  <td>
    <%= f.text_field :column %>
  </td>
  <td>
    <%= f.submit "Add" %>
    <% end %>
  </td>
</tr>

这就是混乱开始的地方：在 Webkit 浏览器和 IE 中，这按预期工作！生成的 HTML 是这样的：

<table>
  <tbody>
    <tr>
      <td>
        <form>
        </form>
      </td>
      <td>
        <input>
      </td>
      <td>
        <input type="submit">
      <td>
    </tr>
    <tr>The list of values</tr>
  </tbody>
</table>

当然，事实上，在输入开始之前，表单在同一个单元格中开始和结束，这应该会引发一个危险信号，表明出现了问题。但是，该表单仍然可以提交并且在其他方​​面工作正常。

在 Firefox 中，情况并非如此。表单呈现的内容更像是这样的（显示的只是前置行中的内容，因为其他内容都是相同的）：

<td>
  <form>
  </form>
  <td>
    <input>
  </td>
  <td>
    <input type="submit">
  <td>
</td>

这里的区别在于，与 Webkit/IE 浏览器不同，Firefox 将所有内容都放入 form 中标签的单元格。此外，该表单根本不起作用 - 它甚至不提交。甚至没有发出任何请求。

现在，从我的一些研究中，我了解到我在这里可能犯了一个巨大的错误，而差异来自于浏览器尝试以不同的方式呈现我遗漏的任何内容。通过尝试，我发现这与 Rails 表单如何与表格交互没有什么关系 - 如果您只渲染表格内的部分，则浏览器之间的 HTML 是相同的（表单标签仍然在其他输入之前关闭）但是，这可能意味着我将 <% end %> 放在了错误的位置！）。当我使用 jQuery 预先渲染渲染的部分时，发生了一些错误：可能由于没有封闭的表标签而导致部分渲染错误，然后插入到表中，从而导致问题。

真的，我已经被难住了。我已经广泛地寻找了这个问题，虽然有一些无关紧要的问题，但似乎没有一个真正触及我的问题。

我预计我犯了一些非常简单的错误 - 但它是什么？

任何帮助将不胜感激！我希望我已经尽可能清楚地解释了这个问题。

Answer 1

看局部就很明显了。你有一个嵌套错误。如果您在某个元素（在本例中为表格单元格）内打开表单标签，您也需要在那里关闭它。在这种情况下验证标记会有所帮助。

如果您必须使用表格，您可以在其周围放置表单标签并将完整内容插入到页面中。