17

問題は、条件に基づいて、（UJSを使用して）非リモートフォームに変換して送信するようなリモートフォームがあることです。フォームにファイルがアップロードされていることに注意してください。

詳細は次のとおりです。最初にを使用してリモートフォームをレンダリングしました

= form_for @myobj, :url => {:action=>"remoteAction", :controller=>"myobjects"}, :remote => true do |f|
... (f.fields....)

HTMLを生成します：

<form id="new_myobj" class="new_myobj" method="post" accept-charset="UTF-8" data-remote="true" action="/remoteAction">

[送信]をクリックすると、予想どおり、フォームが「ASJS」で送信されます。コントローラアクションでは、送信されたフォーム内のフィールドの検証を行っています。すべての検証に合格したら、次の.js.hamlテンプレートを実行します。

$('form#new_myobj').removeAttr("data-remote");
$('form#new_myobj').attr('enctype', 'multipart/form-data');
$('form#new_myobj').attr('action', '/myobjects/regularAction');

これにより、ページ上のHTML（Firebugで確認）が次のように正常に変更されます。

<form id="new_myobj" class="new_myobj" method="post" accept-charset="UTF-8" enctype="multipart/form-data" action="/myobjects/regularAction">

フォームにはf.file_fieldが含まれているため、画像をアップロードできるようにマルチパートとして送信する必要があり、「AS JS」を送信できません。送信をクリックすると、コントローラーアクション「regularAction」が実際に呼び出されますが、それでも「ASJS」

問題は、フォームをxhr以外で送信できるように、HTMLで他に何を変更する必要があるかということです。それはヘッダーに関連していますか？

4

2 に答える 2

42

jQuery は、HTML5 データ タグと、データとも呼ばれる DOM 要素にバインドされた独自のストレージの両方を読み取るため、データ属性には少し注意が必要です。値が jQuerys 自身のデータ ストレージにコピーされる属性に書き込むとき (おそらくdata("remote")が呼び出されたとき)。

ただし、これは、jQuery のデータがその名前に対して空の場合にのみ発生します。したがって、属性の設定は一度だけ機能し、その後は属性が変更されても「キャッシュされた」値が使用されます。実際に値を取り除くには、属性と jQuery 独自のストレージ メソッドをこの順序で削除する必要があります。その理由は、高レベル ( element.removeData(…)) 関数と低レベル ( ) 関数があるためですjQuery. removeData(element, …)。前者は HTML5 の data 属性を再読み込みし、jQuery 独自のストレージに格納します。かなり珍しい低レベル関数を使用することも明らかに機能します。

また、この属性を本当に削除する必要があります。Rails は が未定義でないかどうかのみをチェックするため、 false に設定するだけでは十分でform.data('remote') はありません ( で探してくださいjquery_ujs.js)。

TL;DR:

  • attr("data-remote") != data("remote")
  • これらの 2 つの行により、フォームは (再び) 非リモートになります。順序が重要です。
  $("form").removeAttr("data-remote");
  $("form").removeData("remote");

探しているものが実際にわかっている場合は、文書化されています。

StackOverflow では 2 つ以上のリンクを投稿することはできませんが、removeData のリンクは推測できます。高レベルの機能は、低レベルの機能からリンクされています。

Rails 4+ でのトークン認証エラーの回避: Stan が以下にコメントしたように、上記を実行するだけではInvalidAuthenticityTokenエラーで失敗します。ただし、回避策は簡単です。詳細については、 https ://stackoverflow.com/a/19858504/1684530 を参照してください。

于 2012-09-20T00:28:02.410 に答える
4

問題は、Ajax 送信を無効にするアプローチが正しくないことです。rails.js (Rails UJS アダプター) によって既にフォームに追加されている JavaScript イベントのバインドを解除する必要があります。$('form#new_myobj').unbind()フォームに添付されたすべてのイベントのバインドを解除します。 また、属性と属性 (存在する場合)を削除する必要があり$('form#new_myobj').removeAttr('data-remote')ます。$('form#new_myobj').removeAttr('data-type')data-remotedata-type

于 2012-03-28T12:22:22.350 に答える