Rails数据-disable-with重新启用按钮

Question

我有一个使用Rails Devise框架的表单，其中包含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 ether中的函数之前运行，该函数禁用了按钮，因此无法正常工作。

我的提交按钮很简单：

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

有人能帮我吗？我想如果我能在这个页面上禁用jQuery_ujs，那就可以解决问题了，但我不确定我是否能够这样做。

- Ryan Murphy

Answer 1

在Rails 5中，这种行为已经改变，现在默认禁用提交。

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

config.action_view.automatically_disable_submit_tag = false

或者，为了针对特定的按钮临时执行此操作，请将以下内容添加到提交按钮中

data: { disable_with: false }

- macav

---

源代码：http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag - mastaBlasta

最有价值且绝对是基于原始框架文档和约定的答案，其他方法只是为了修复它而进行的hack。 - alexventuraio

有什么想法把它放在哪个文件中吗？我们最终选择了application.rb。我们努力尝试将其放入initializers/action_view.rb文件中，但是在经过大量语法调整后无法使其正常工作。 - Dave Morse

@DaveMorse 我认为将其放在application.rb中是一个不错的选择。 - macav

Answer 2

这对我有所帮助，让我知道了该寻找什么。如果有人想要在您的html.erb文件中进行更正，这是我的解决方案：

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

- jasmineq

---

感谢您提供这个简单、简短且有用的解决方案！ - Aboozar Rajabi

Answer 3

看看我的回答。

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

https://dev59.com/dWQm5IYBdhLWcg3w2R5J#44318786

- waqas ali

---

这是一个非常棒的答案，迄今为止最好的答案，因为它解决了 op 实际提出的问题（他们并没有问如何去除禁用功能），而且是一种超级清晰的 Rails 方式来完成它。谢谢！ - Matt Powell

Answer 4

我成功地解决了这个问题。我只需使用以下代码从按钮中删除data-disable-with即可：

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

然后在表单准备提交时重新设置属性，以防止双击创建重复项。

- Ryan Murphy

---

是 Rails 5 加入了这个功能吗？我刚刚花了一个小时来调试，“到底是谁在改我的提交按钮！” UJS 真是太粗鲁了。这个看起来可以解决问题。 - Mike

使用JS在页面加载后操纵页面以实现默认行为是一种不好的做法。 - Archonic

@Archonic，不是很清楚。你能否详细说明一下或分享一个链接让我了解更多？ - alexventuraio

@alex-ventura 可以直接通过 HTML 删除 data-disable-with。那将是更好的解决方案。 - Archonic