Rails data-disable-with re-enabling button

Question

I have a Rails Devise form that has javascript validation. When the user presses submit, the validation works and the user is refocused on the form where they need to be.

However, rails uses the data-disable-with to disable the button after it has been clicked, so after the validation the user cannot click submit anymore. I am trying to set up some kind of listener to check when the button has been disabled, wait a little while to prevent double clicks, then re-enable the button.

I have tried many iterations of code, the latest I tried was:

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

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


      });

But had no success, previously I tried just adding a listener to the button:

      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;
      }

But this failed because it ran before the function (hidden in rails ether) that disabled the button so did not work.

My submit button is a simple:

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

Can anyone help me out here? I think if I can disable the jQuery_ujs for this page that would work, but not sure if I can do that.

score 110 · Answer 1 · answered May 17 '17 at 13:00

110

This behaviour was changed in Rails 5, now it's disabling submits by default.

Rather than accepted answer, I would suggest to use the following configuration:

config.action_view.automatically_disable_submit_tag = false

or, to do it ad-hoc for specific buttons, add this to the submit button

data: { disable_with: false }

answered May 17 '17 at 13:00

macav

1,472
1
9
10

Source: http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag – mastaBlasta Jan 16 '18 at 19:28
2

The most valuable and absolutely an answer to the problem base on the original framework documentation and conventions, _the other are just hacks to fix it_. – alexventuraio Jul 29 '18 at 03:02
Any ideas on what file to stick it in? We ended up going with application.rb. We tried hard to put it in an initializers/action_view.rb file, but couldn't make it work, after much syntax thrashing. – Dave Morse Dec 14 '22 at 23:06
1

@DaveMorse I think application.rb is a good place for it. – macav Dec 15 '22 at 09:47

score 26 · Answer 2 · edited Jul 31 '18 at 02:52

26

This was helpful to give me a hint on what to look for. If anyone is looking how to correct this in your html.erb file, this was my solution:

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

edited Jul 31 '18 at 02:52

Stephen Rauch

47,830
31
106
135

answered Jul 31 '18 at 02:31

jasmineq

521
5
7

Thanks for this simple, short and helpful solution! – Aboozar Rajabi May 21 '19 at 15:06

score 12 · Answer 3 · answered Jun 01 '17 at 23:55

12

Look at my answer.

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

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

answered Jun 01 '17 at 23:55

waqas ali

603
6
13

This is an awesome answer, by far the best as it addresses what the op was actually asking for (they weren't asking how to remove the disable functionality) and is a super clean Rails-ey way to do it. Thanks! – Matt Powell Jan 20 '20 at 03:26

score -4 · Accepted Answer · answered Feb 03 '17 at 03:50

-4

I managed to solve this quite simply. I just went in and removed the data-disable-with from the button with the code:

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

And then re-establishing the attribute when the form was ready to be submitted to prevent double clicks from creating duplicates.

answered Feb 03 '17 at 03:50

Ryan Murphy

842
1
9
20

1

Was it Rails 5 that added this? Just spent an hour debugging, "Who the hell is changing my damn submit button!" How rude of UJS. This appears to do the job. – Mike Apr 24 '17 at 15:29
4

Manipulating the page after load with JS as a means for enforcing default behaviour is a bad practice. – Archonic Jan 19 '18 at 22:15
Hmm not much clear @Archonic. Can you elaborate more about it or share a link to read about that? – alexventuraio Jul 29 '18 at 02:57
@alex-ventura The data-disable-with can be removed through HTML directly. That would be a better solution. – Archonic Jul 30 '18 at 05:51

Rails data-disable-with re-enabling button

4 Answers4

Linked