web-dev-qa-db-ja.com

Rails data-disable-with with re-enableingボタン

Rails Javascript検証を行うDeviseフォームがあります。ユーザーが送信を押すと、検証が機能し、ユーザーは必要なフォームに再び焦点を合わせます。

ただし、Railsはdata-disable-withを使用して、ボタンがクリックされた後にボタンを無効にするため、検証後にユーザーは送信をクリックできなくなります。何らかのリスナーを設定しようとしています。ボタンが無効になったことを確認するには、少しクリックしてダブルクリックを防ぎ、ボタンを再度有効にします。

私はコードの多くの反復を試しましたが、試した最新のものは次のとおりです：

      $(document.on("ajax:success", "new_supplier", function() {
      var button;

      button = $(this).find('.btn-sign-up');
      setTimeout((function() { return button.disabled=false; }),1);


      });

しかし、成功しませんでした。以前はボタンにリスナーを追加しようとしました。

      var button = document.getElementById('btn-sign-up');
      button.addEventListener("click", enableButton);

      function enableButton() {
          if (button.disabled)
          {
              window.setTimeout(enable(), 2000);
          }
      }


      function enable() {
          button.disabled=false;
      }

しかし、ボタンを無効にする機能（Rails ether）に隠れている）の前に実行されて機能しなかったため、これは失敗しました。

私の送信ボタンは簡単です：

    <%= f.submit "Create my account", class: 'btn-sign-up', id: 'btn-sign-up' %>

誰でもここで私を助けることができますか？このページでjQuery_ujsを無効にできる場合は機能すると思いますが、それができるかどうかはわかりません。

javascriptjqueryruby-on-railsujs
23
Ryan Murphy

これを簡単に解決できました。私は入って、コードでボタンからdata-disable-withを削除しました：

    $('#my-button').removeAttr('data-disable-with');

そして、ダブルクリックによる重複の作成を防ぐために、フォームを送信する準備ができたときに属性を再確立します。

0
Ryan Murphy

この動作は、Rails 5で変更されました。現在は、デフォルトで送信を無効にしています。

受け入れられた答えではなく、次の構成を使用することをお勧めします。

config.action_view.automatically_disable_submit_tag = false

または、特定のボタンに対してアドホックに行うには、これを送信ボタンに追加します

data: { disable_with: false }
62
macav

これは、何を探すべきかについてのヒントを与えるのに役立ちました。 html.erbファイルでこれを修正する方法を探している人がいる場合、これが私の解決策でした：

<p>
  <%= f.submit 'Submit', data: { disable_with: false } %>
</p>
10
jasmineq

私の答えを見てください。

$button = $('#someId')
$.Rails.enableElement($button)
$button.removeAttr('disabled')

https://stackoverflow.com/a/44318786/4349494

6
waqas ali