How to disable buttons while server handles a request in RoR/JQuery

Question

I have a page that is generated using RoR, JQuery and Bootstrap.

that page has three action buttons: edit, delete and disable.

• The disable action changes the state of the entity and refresh the page.
• The edit action sends the user to a form, where the user can edit the entity.
• The delete action displays a confirm windows and if the users click Yes the entity is deleted.

What I am trying to do is to disable these buttons, while the server is handling the requests according to the action.

How can I do that? trying to use $(".btn").attr("disabled", "disabled") is not good enough because what happens if the user clicks on delete but then clicks on "No"? or when edit is being clicked but then the user decides to go back in history? in all these cases the buttons are still disabled.

Thanks.

Answer 1

You're using the wrong jQuery function., try:

$('#myInputId').prop('disabled', 1);

Elements attributes such as disabled and readonly require the prop() method and a boolean to change the state.

Regarding your jQuery AJAX request and creating a UX notification for the user, you can use the beforeSend option when building out your AJAX request to either show an AJAX spinning GIF or insert a message into the DOM.

Hope that helps!