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.

Gokey

Answer 1

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.

Gokey

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. – Indispose

Manipulating the page after load with JS as a means for enforcing default behaviour is a bad practice. – Tapioca

Hmm not much clear @Archonic. Can you elaborate more about it or share a link to read about that? – Hordein

@alex-ventura The data-disable-with can be removed through HTML directly. That would be a better solution. – Tapioca

Answer 2

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 }

Humphreys

Source: api.rubyonrails.org/classes/ActionView/Helpers/… – Burley

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. – Hordein

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. – Aam

@DaveMorse I think application.rb is a good place for it. – Humphreys

Answer 3

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>

Calen

Thanks for this simple, short and helpful solution! – Frolic

Answer 4

Look at my answer.

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

https://mcmap.net/q/372968/-re-enable-links-disabled-with-disable_with

Landmark

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! – Piker