web-dev-qa-db-ja.com

Rails 4：クリック後に送信ボタンを無効にする

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機能は非常にうまく機能します。

送信ボタンを無効にする別の方法はありますか？

jqueryruby-on-railsruby-on-rails-4ujs
12
Albert

この問題は、無効なHTMLコードが原因で発生しました。 <div> breaks <form>disable_withが機能するようになりました

0
Albert

使用する

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }
50
ceo_9_palkad.com

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..."} %>
13
Steve

CoffeeScriptを使用して、次のようなことを行います。

jQuery ->
  $('.theform').submit ->
    $('input:submit').attr("disabled", true)

これにより、class="theform"のフォームが送信されたときにフォーム送信ボタンが無効になります。必要に応じて、フォームのクラス/ IDに合うようにこれを調整します。

2
murrekatt

これは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を無効にした状態で同じページに移動するはずです

0
Vic