Using jQuery to load a Rails form into a table

This is something that has killed my project dead for a few days now.

I have a standard table of values; with a skeleton something like this:

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

I am trying to load an inline Rails 3 form into the tbody using jQuery to let the user add new values to the table. This is done with a button which gets the new action of my controller, which in turn calls new.js.erb, which simply prepends the form's rendered partial into the table ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');).

The form partial itself goes something like t开发者_如何学运维his:

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

Here's where the confusion begins: in Webkit browsers and IE this works as expected! The resulting HTML goes something like this:

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

Of course, the fact that the form begins and ends in the same cell, before the inputs begin, should raise a red flag that something is going wrong. However, the form still submits and works perfectly otherwise.

In Firefox, this is not the case. The form renders something more like this (shown is just the stuff inside the prepended row since everything else is the same):

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

The difference here is that unlike the Webkit/IE browsers, Firefox throws everything into the form tag's cell. Also, the form does not work at all - it does not even submit. No requests even get sent out.

Now, from some of my research I learned that there is probably a huge mistake I am making here and the difference comes from the fact that browsers try to render whatever I've left out in different ways. From playing around with it, I've figured out that this has little to do with how Rails forms interact with tables - if you just render the partial inside a table the HTML is identical between browsers (the form tag still closes before the other inputs begin, though, which may mean that I'm putting <% end %> in the wrong place!). Something is happening wrong when I am prepending the rendered partial using jQuery: perhaps the partial renders wrong due to not having enclosing table tags and is then inserted into the table, causing the problems.

Really, I have been stumped. I have looked for this far and wide and while there are some tangentially related questions none seem to really hit on my issue.

I am expecting that I've made some very simple mistake - but what is it?

Any help would be GREATLY appreciated! I hope I've explained the problem as clearly as possible.

By looking at the partial it is quite obvious. You have a nesting error. If you open a form tag inside some element (in this case table cell) you need to close it there too. Validating the markup helps in this kind of cases.

If you must use table, you could put form tags around it and insert the full thing to the page.