Clash Royale CLAN TAG#URR8PPP

Rails data-disable-with re-enabling button

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.

4 Answers
4

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


Source: api.rubyonrails.org/classes/ActionView/Helpers/…
– mastaBlasta
Jan 16 at 19:28

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.
– Alex Ventura
yesterday

Look at my answer.

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


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

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.

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

Manipulating the page after load with JS as a means for enforcing default behaviour is a bad practice.
– Archonic
Jan 19 at 22:15

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

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

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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.