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

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!

Related

preventDefault() doesn't work after AJAX request

I am using PreventDefault(), for the submit event, in case they do not find changes in my input, so far so good, the problem is that after making the AJAX request, (I do not reload the page, only DIV), the user can press the submit button if you make any changes.
I would like the PreventDefault to continue working after each registration after the AJAX request, since it is only activated again if the page is reloaded
It would be much easier if I can see your code but instead of preventDefault(), you need to manage state changes within your input and then based on the state (whether it is empty or has string or type of data you are getting), you can disable or enable your button.

Hot to update Postback data directly using ViewState or some other method to clear hidden field?

I have a hidden field that stores some Ids of items to be updated when a button is clicked on the page. This is working fine. However, if the user clicks the Update button, then waits for page to reload, and then refreshes the page manually (using browser Refresh button), the data is resubmitted and creates duplicate data in the database.
Is there a way to clear the hidden field in the Postback data so that if the user does refresh the page manually, the hidden field will be empty and no updates to the database will be made?
So far, I have tried to manually update the ViewState using the code below after the database is updated.
ViewState["hdnBulkIds"] = "";
I have also tried to exclude the hidden field from the ViewState and manually clear it using jQuery on page load.
$( document ).ready(function() {
$('#<%= hdnBulkIds.ClientID %>').val("");
});
In both cases, I cannot seem to update the data "instance" that is sent to server on manual page refresh so the hidden field retains its original values from original button click.
I guess the question can be simplified to this: Is there a way to update the Postback data directly using ViewState or some other method to clear the hidden field?
This is a big issue with webforms in general and a big reason you should consider jumping ship to MVC. There may be an elegant way to handle this through webforms, but I'm not aware of any.
Once the user submits a form the browser "remembers" that submission and the refresh will re-submit it. There is nothing you can do about that, you have to detect a second submission through other means.
Your best/most true solution is to do a redirect after you get all of your data, and use your query parameters to re-build the page in the state it needs to be in. Then when the user refreshes the screen it will resubmit the redirect instead of the form submission.
Page.Redirect() or something along those lines is the function that lets you do a redirect. Trouble is, a page redirect will erase all state webforms was maintaining about the page, you have to rebuild all of it.
You also might be able to implement some sort of "CSRF" token style system. Generate a random number and store it in the user session on page load. When the user posts back, invalidate that number somehow. That way, if they post-back again with the number you can cancel the request.
That's a hackey way of going about things, doing a redirect is the "tried tested" method to my knowledge.
Another option is if the postback edits a value, check for duplicates or if the value is edited and if there are duplicates don't let the user double-submit.

Save progress and submit button for a form

I have a form, where most fields are required. Once the form is submitted series of automated tasks gets initiated.
I want to provide users the ability to save their progress and come back and complete the form.
Cookies isn't a option, as users will be logged in to their account and should be able to continue their application from different devices.
The application is saved in the database. I need to do it in a way so that submit button submits the form, checks for all the required fields. (It does this currently).
I also need to have a save progress button which will ignore the validation and just save the data currently filled. ( No automated tasks etc should run when form is saved using this button.).
Is there a way to achieve this? If so how do i go about it?
The solution above may not be the right / most effective solution. I'm open to any other suggestion.
Thank You
On the second button you can use the formaction attribute.
Please note this works only on for buttons with type="submit". Then you can send the save progress info to a different page then just store the info.
<button type="submit" formaction="saveprogress.php">Save Progress</button>
If you are having two submit buttons, 1. Submit and 2. Save Progress, then it will be very easy.
Add onClick action on Submit button to validate the form, and after complete validation(return true for correct validation) you can save the data in database.
And on Save progress, just on click of button, you can directly save the data into database.
You need to make the changes in database schema. Add one more column(is_validated), to specify whether the data is validated or not for the user(As mentioned by you, you are firstly logging in user in your application).
When you are fetching data again, you can show the form according to is_validated flag.

Making get/post requests to bootstrap modals. How?

I am having a really difficult time trying to make a request and communicate with modals from other websites. For regular html you can see the hyperlink when hovering over the link or find out all about the element when inspecting, but with modals it seems like all the code is hidden on their website somewhere, making me unable to send http get/post requests correctly.
For ex when theres a button called "View containers" it opens up a modal and then theres a textarea field and a submit button. I know the ID of the text field, but there is like zero information on the submit button or where the submit button can lead to. I want to make a script that automatically sends a request , enter in the container # and clicks submit. But I dont know how to make the script click/send submit button
First, you'd want to change the input value
You can click buttons using the DOM click method after selecting it, probably using IDs
Additionally, I'd ensure the modal was put into the DOM before trying to insert values, or press submit...modals may not be inserted to the DOM until they are triggered/loaded.

How to ultimately disable a button with javascript?

I want to build an interactive page within a website. On this page i want to put a list of items, that people can choose from, in order to bring one of them to a certain event/party.
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
I want this event to happen within a conditional statement in JavaScript somewhat like this:
if (confirm("Do you really want to bring this item to the event/party?") == true) {
HERE I WANT TO PUT THE CODE THAT IS NECESSARY!
} else {
}
I don't think you can do this with pure JavaScript, because JavaScripts loads everytime the page gets refreshed. Are you getting your data from a database? If so, you could add another field to your table e.g. "party" with the name "active". If the user clicks on a button, the party would be inactive and not showing up anymore.
But as I said, I think it's not possible with only JavaScript.
PS: Greetings from Germany ;)
You can't do this with JavaScript alone. You will need to employ some server-side scripting and (ideally) a database to store who has selected what so that you can "prevent" someone else from selecting the same item.
Your system should also include a user registration process so that you can tie your products to events and then tie users to the products they have selected for the event.
Thus:
User registers -> they select an event -> they select a currently available product -> some confirmation occurs which then flags the database that anyone else is unable to select this product for the chosen event. The confirmation can be achieved with standard forms processing methods or AJAX...
Once a user choses an item via a confirm pop up box, i want the button to be ultimately disabled, even if the user opens the page again or another user opens the page.
Javascript can't preserve these types of states. It only runs in users browsers. You can't save it to cookie either. Saved cookie is only useful for certain users certain browser. You have to save this data in your server (preferably in database) from where you can read this item is chose by a user. And then you can decide from client when to disable the button.

Categories