We Keep Coding

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

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.

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!

Why is a user checking a box different than doing it programmatically?

I'm playing around in the Chrome Dev Tools console and I noticed that when I physically click a checkbox with my mouse and when I call $('input.checkbox').prop('checked',true), the end result is aesthetically the same but not in the back end.
For example let's say there's a form that submits the user's gender. If I click the checkbox next to 'Male' and hit submit, the system'll record the change, but if I were to call $('input.checkbox#male').prop('checked',true) and hit submit it doesn't record the change in the back end.
Does doing it programmatically not change the state or is there something on their end that specifically was done to forbid changing the state programmatically?

That is most likely because event listeners onClick, onChange and friends are only triggered on user actions, not when you change some state programmatically.
The actual form data that gets submitted should be the identical, though, no matter how you arrived at setting the form input values, and how you trigger the submission. In your case, maybe you have some event handlers setting some hidden fields?

There's likely a click or change listener that does something necessary before submitting the results. Try using $('input.checkbox#male').click() instead of $('input.checkbox#male').prop('checked',true)

Button and onchange in html form

There is a rather simple html application.
Changing text field will cause a submit, follow by a redraw.
Pressing button will cause a submit, too.
When changing a field and leave it by pressing a button, the browser run into a conflict.
The browser starts one submit, aborts it and do the next submit.
The result is unreliable.
Is there a simple solution to get one submit with button and field without switching to some AJAX approach (say GWT)?

You could cancel any other event handler when starting to submit the form. This is similar to disabling a submit after clicking it, to prevent the form being submitted twice by impatient users.

You can send a flag that will tell if submit function has called once, if submit already called then don't call submit for this user.
OR you can disable the submit button as soon as call the function from text field change, in this way user will not be able to click on the submit button.
Might help you

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!

If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.

If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function

This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.

Deselecting a form input and waiting for a function before submitting

I have a form with an input field where a user enters a unique identifier. I then have some jQuery code that upon the user moving away from the input field (blur) goes out and fetches details about the part and populates some fields on the page. The problem is if the user clicks the submit button before moving out of the input field the jQuery code never has a chance to load in the data and populate the necessary fields. Whats the best way to go about doing this? I thought about maybe setting the focus to body and then having an infinite loop that keeps checking the page until all fields that should be filled in have been filled in but I feel like some sort of event based solution would be better than unpredictable infinite loops. Any ideas?

Give the form an onsubmit event.
Have that event return false unless all the form fields are populated correctly.
In jQuery:
$("#formname").submit(function()
{ if (condition_not_met) return false; });
This will block the form from submitting until everything is in place.
The blocking will not work with JavaScript disabled, but seeing as you're using Ajax to fetch the correct fields, that probably won't matter.

I'm guessing you are making an ajax call in the blur function?
Could you disable the submit button (either on page load or on blur), and then enable it in the ajax callback?