jQueryを使ってテーブルにRailsフォームをロードする

Question

これは私のプロジェクトが数日間死んでしまったものです。
私は値の標準テーブルを持っています。このようなスケルトン何かを：

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

私は、ユーザーがテーブルに新しい値を追加できるようにするjQueryのを使用してtbodyにインラインRailsの3形式をロードしようとしています。これは、コントローラの新しいアクションを取得するボタンで行われ、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でこれは動作します！もちろん

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

、フォームが開始され、入力が開始する前に、同じセル内に終わるということは、何かが間違って起こっている赤い旗を上げる必要があります：結果のHTMLは次のようなものになります。しかし、フォームは依然として提出し、完全に別の方法で動作します。

Firefoxでは、これは当てはまりません。フォームは、より多くのこのような何か（図示は他のすべてが同じであるため、先頭に追加行の内部だけのものです）レンダリング：

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

ここでの違いは、Webkitの/ IEのブラウザとは異なり、Firefoxはformにすべてを投げることですタグのセル。また、フォームはまったく動作しません - 提出さえしません。リクエストは送信されません。

私の研究の中には、おそらく私がここで作っている巨大な間違いがあることを知っています。違いは、ブラウザーが、私が何か別の方法で放棄したものをレンダリングしようとしているという事実から来ます。私は、Railsフォームがテーブルとやり取りする方法とはほとんど関係がないことを理解しました。テーブル内の部分をレンダリングするだけで、ブラウザ間でHTMLが同じになります（フォームタグは他の入力しかし、私は<％end％>を間違った場所に置いている可能性があります。 jQueryを使用してレンダリングされた部分を前に置いているときに、何かが間違っています。おそらく、部分的にレンダリングするときに、テーブルタグを囲っていないために間違ってレンダリングされ、テーブルに挿入されて問題が発生します。

本当に、私は困惑しています。私はこれを広範囲に捜し求めてきましたが、接線的に関連する質問はありませんが、私の問題で本当に打撃を受けていないようです。

私はいくつかの非常に単純な間違いをしていると思いますが、それは何ですか？

ご迷惑をおかけして申し訳ございません。問題を可能な限り明確に説明していただければ幸いです。

Answer 1

部分的に見るとかなり明らかです。ネスティングエラーがあります。いくつかの要素（この場合は表のセル）内でフォームタグを開くと、そこにもフォームタグを閉じる必要があります。マークアップの検証は、このような場合に役立ちます。

テーブルを使用する必要がある場合は、フォームタグを周囲に配置して、ページに完全なものを挿入することができます。