8

私が持っているもの：

AJAX 経由で送信するフォームがあります。

<%= form_for([@map, @annotation], :remote => true ) do |f| %>
   ...
   <%= f.submit "Save annotation", :class => "btn btn-primary", :id => "annotation-submit-button" %>
<% end %>

私が欲しいもの：

二重投稿を防ぎたい。リクエストが正常に完了した場合にのみフォームが消えるため、データベースがデータの書き込みを完了していない限り、ユーザーは送信ボタンをクリックできます。明らかに、私はそれを望んでいません。

私が試したこと：

これを送信ボタン自体に追加しようとしましたが、機能しません。ボタンは無効になりますが、データは送信されません。

:onclick => "this.disabled = true"

また、送信ボタンにクリック ハンドラーを追加しようとしました。これは以前と同じ効果があります。実際にはコントローラにデータは送信されませんが、ボタンは無効になっています。

$("#annotation-submit-button").click(function(event) {
  $(this).attr("disabled", "disabled");
  return false;
});

また、戻らずに同じことを試みましたfalse。ボタンが無効になった後は何も起こりません。

$("#annotation-submit-button").click(function(event) {
  $(this).prop("disabled", "disabled");
});

これはRails固有のものだと思い始めましたか?

4

4 に答える 4

20

disable_withRails 3以降では、次のようなビューを試してください。

<%= f.submit "Save annotation", :data => {:disable_with => "Saving..."}, ... %>

Rails 2の場合：

<%= f.submit "Save annotation", :disable_with => "Saving...", ... %>
于 2012-07-16T14:20:35.960 に答える
2

ボタンを無効にすると、問題なく動作するはずです。

ajax 呼び出しを実行するのと同じ関数でボタンを無効にするだけです。

$("#annotation-submit-button").click(function(event) {
  // do ajax call
  $.ajax(...);
  // disable the button
  $(this).prop("disabled", true);
  // prevent the standard action
  return false;
});

ただし、jQuery 1.6 以降では、prop()代わりに を使用する必要がありattr()ます。

編集：

return false;コメントへの返信として、Rails 経由で formsubmit の実行を中断しないように、を省略してみてください。

$("#annotation-submit-button").click(function(event) {
  // disable the button
  $(this).prop("disabled", "disabled");
  // do not return false since this stops the event propagation
});
于 2012-07-16T13:57:15.097 に答える
1

jQueryによる：必要なアクションを処理するために次のことを行うことができます

$.ajax({
  .....,
  beforeSend: function (){ $('#your-button').attr('disabled', 'disabled'); },
  success: function (){ 
    // Here you can enable the button
  }
});

これがあなたを助けるかもしれないことを願っています

于 2012-07-16T14:01:53.877 に答える