form_tag(foo_path(@foo), remote: true, id: 'foo-form'
フォームと送信ボタンsubmit_tag ("Submit", :id => "foo-submit")
があります
クリックした後、送信ボタンを無効にしたいのですが。明らかに、onlick="jQuery(this).prop('disabled', true);"
のようなものは、リモート機能を壊してしまうため、使用できません。 submit_tagの:disable_with
データ属性を認識していますが、機能していないようです。正しいフォームコードを生成しますが、効果はありません。なぜ機能しないのかわかりませんが、プロトタイプ(レガシーの理由)とjqueryを同時に使用していることが原因である可能性があります。ただし、プロトタイプではなく、jqueryに対してのみujs
をロードします。ただし、他のすべてのquery_ujs
機能は非常にうまく機能します。
送信ボタンを無効にする別の方法はありますか?
この問題は、無効なHTMLコードが原因で発生しました。 <div> breaks <form>disable_with
が機能するようになりました
使用する
submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }
submit_tag
の代わりにbutton_tag
があります。 button_tag
を使用すると、素晴らしいフォントスピナーを追加できます。
<%= button_tag 'Submit', class: 'btn btn-primary',
data: { disable_with: "<i class='fa fa-refresh fa-spin'>
</i> Submitting Changes..."} %>
CoffeeScriptを使用して、次のようなことを行います。
jQuery ->
$('.theform').submit ->
$('input:submit').attr("disabled", true)
これにより、class="theform"
のフォームが送信されたときにフォーム送信ボタンが無効になります。必要に応じて、フォームのクラス/ IDに合うようにこれを調整します。
これはajax呼び出しであるため、対応するアクションの結果のjs.erbファイルがトリガーされます。
クリック時無効化アルゴリズムは、このjs.erbファイル内に配置できます。
# in the controller
def foo_method
...
# will render js.erb for ajax call
# assuming there is no .html view file in the directory
end
# in foo_method.js.erb
$('input:submit').attr("disabled", true);
ボタンnoewを無効にした状態で同じページに移動するはずです