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.

Answer 1

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 }