入れ子フォーム（設計質問）

Question

私のページに表示される項目のリストがあります。

1. 項目A [編集]
2. 項目B [編集]
3. 項目C [編集]

あなたが編集アイコンをクリックすると各項目は編集可能です。 編集フォームはajax呼び出しで表示され、コントローラーはフォームを返します。項目A [保存]

項目B [編集]

項目C [編集]

ため

1. 編集フォームしかし、すべてのリストは、編集可能なバルクであるので、各項目も有していますチェックボックスをオンにします。
   1. [CB]項目A [編集]
   2. [CB]項目B [編集]
   3. [CB]項目C [編集]

   、フォームがリストの周囲にあります。

   form_tag 1 [CB]項目A [編集] 2 [CBの】項目B [編集] 3 [CB]項目C [編集] 処置：選択アクション[一括編集]

   端

   アイテム編集ボタンをクリックすると、フォームが返されるので、2つのフォームがネストされています。 すべてのコードが壊れています。

   私はすべてのアイテムの周りに一括編集フォームを持たず、2つのネストされたフォームで終了しますか？

   ありがとう、 Mickael。

Answer 1

私はJavaScriptを使用して私の問題を解決しました。編集フォームをロードするとき、送信ボタンはフォームを送信しませんが、フォームパラメータを正しいURLに送信するAjaxリクエストを呼び出します。

Answer 2

ネストされたフォームを持つことはできません...実際に、検証しようとすると、大きくて醜いhtmlエラーが発生します。

あなたの問題の解決策は、これは次のようなものです：あなたがajaxリクエストを行い、編集フォームを返すと、htmlの最後にコードを挿入してモーダルウィンドウに表示することができます数ヶ月前のプロジェクトで）。 P

Answer 3

あなたはおそらくCSSの力でそれを解決し、フォームが入れ子になっているかのように見せかけることができ...中かかわら：

しかし、私はRoRのは、それだけの考えだどのように動作するか分かりません実際のところ、そうではありません。

私の限られたCSS知識から、フロントエンドのエンジニア、つまりGoogleにとって最良の質問です。

Answer 4

選択した行をハイライト表示して、その上で「クリック」イベントをバインドすることで、選択した行/選択しなかった行を切り替えることができます。次に、submitをクリックすると、クラス "hilight"の行が送信されます。

あなたは、チェックボックスをオフのままにして、このような構造に何か作ることができます： ... ... ..etc

は、次にjQueryを使って、あなたがそれらのイベントをクリックして結合することができる、のような：

を

$('.checked').click(function(e) { 
    $(this).toggleClass('hilight'); 
});