Rails 数据禁用和重新启用按钮

Question

我有一个 Rails 具有 javascript 验证的设计表单。当用户按下提交时，验证开始工作并且用户重新关注他们需要的表单。

但是，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 乙醚中）之前不起作用。

我的提交按钮很简单：

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

有人可以帮我吗？我想如果我可以禁用此页面的 jQuery_ujs 就可以了，但不确定我是否可以这样做。

Answer 1

我很简单地解决了这个问题。我刚进去并使用代码从按钮中删除了 data-disable-with：

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

然后 re-establishing 表单准备好提交时的属性，以防止双击创建重复项。

Answer 2

此行为已在 Rails 5 中更改，现在默认禁用提交。

我建议使用以下配置，而不是接受的答案：

config.action_view.automatically_disable_submit_tag = false

或者，要针对特定按钮临时执行此操作，请将其添加到提交按钮

data: { disable_with: false }

Answer 3

看我的回答

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

Answer 4

这有助于提示我要查找的内容。如果有人正在寻找如何在您的 html.erb 文件中更正此问题，这是我的解决方案：

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

Rails 数据禁用和重新启用按钮

Rails data-disable-with re-enabling button

javascript

jquery

ruby-on-rails

ujs