3 states/conditions of a button

1

Hi,

I would like to achieve a button that will show 3 conditions as below:

First condition is active, ready to click

Second condition is showing when trying to accomplish a task

Third condition is indication when the task is finished. We won’t be able to click the button again (Disabled state)

The script below able to accomplished the first and second condition, but I’m still confused how to achieve the third condition (when the task is finished).

How do I disable the button, so when the task finished, we won’t be able to click that button ?
2

Can I assume you’re talking about making some sort of server request here?

3

Yup, that’s correct.

As soon as the second condition achieved (the task is finished), I would like to disable that button.

I need the second condition because it takes more than 10 seconds for server request (30 queries to server using Ajax).

Everything under the hood is working as expected, it just that I need a way to disable that button.

4

Okay. It should be first noted that jQuery makes this way easier and I would recommend it. Generally, though, you do not want to use timeouts to coordinate events in JavaScript. What happens if your server call takes longer than 5 seconds? What happens if there’s an error? There’s a better way. Let’s get rid of the timers entirely and work with event hooks. I’ll do this in vanilla JS because it’s self-evident how to do this in jQuery. Plus, it’s neat to know how jQuery does this.

There are 4 steps to setting up an XHRHttpRequest:

  1. Create the object
var xhr = new XHRHttpRequest();
  1. Open the request
xhr.open("GET", url);

note: This does not send the request yet, but this is where you would set up the headers.

  1. Wire up the event handlers
xhr.addEventListener('load', leadEventHandler);
  1. Fire off the request
xhr.send()

Step 3 is where the magic happens. The loadEventHandler function will deal with any and all data coming in from the server and it’s the XHR event we become familiar with first. However, it’s not the only event, and there are a few others to help you out with what you want to do.

xhr.addEventListener('loadstart', beginProgressHandler); //Starts when the connection is successful and the server begins sending a response
xhr.addEventListener('loadend', finishProgressHandler); //Starts when the connection is successful and the server has finished sending a response
xhr.addEventListener('error', cockedUpProgressHandler); //Fires off when the server request is mucked up for whatever reason

I would use the loadStart handler to make the first change to your button. The loadend handler would be best for the third state. error and timeout should be used to handle their respective problems should they arise. Check out the documentation for a full list of the events available (there aren’t a lot). Doing this instead of relying on timers will ensure that your application is in the state it should be in when you run your code, rather than guessing and hoping.

Hope this helps!

2 Likes
5

You have valid reason to use event handler in jQuery in first place, unfortunately I already used setTimeout to coordinate events. Lesson learned anyway.

I will try to use jQuery Ajax Event Handler for next project, which is Show the Local Weather.

Thanks @PortableStick