Form Elements With jQuery UI

2.7 jQuery UI Progress Bar Widget

Hello and welcome back. In this lesson, I want to walk you through the creation of another jQuery UI widget called the progress bar. And as you can see on our pen here, we've already got it built and the functionality is already in place. And that's done in the interest of time because this really does take a little bit of code to get this working the way we want it. Now in order to create it, it's actually very, very simple. In our HTML, we create this div with an ID of progress. We don't even need this code in the middle. This can just be an empty div. And then we apply the progress bar UI widget to that div just like we would any other widget that we've been talking about in the short course. And when we instantiate it, we can give it a certain value. So let's jump into our JavaScript to see how we would instantiate it. So in our JavaScript, I'm gonna scroll down to. Let's see, it's gonna be around line 34 here. So we're pointing to that div, which has an ID of progress and then calling the progressbar method on it. And as you can see, we have an object with a property value pair here. We've set the value equal to 0. Now we can change this value to say 50 and when we do that, you'll see that nothing happens. And the reason nothing happens is because this update progress function is overwriting it. And we'll talk about that in a moment. But if you wanted that progress bar to start off at 50%, you would give it that value here. Now I'm just gonna set it back to zero and let's talk about this a little bit more. So as I mentioned before, this code inside that progressbar div, this is not specific to jQuery UI. This is something I created myself. So it's a div with a class of pct for percentage. And I've created a span in here that we're gonna update live in JavaScript. The JavaScript is gonna change the value inside the span as we change the value of this progressbar itself. And so we're just spelling out in text how far along we are in the completion of this form. So as we fill out these form elements for these fields, that progress bar will progress forward and in addition to that, this text will also be updated. So I've added a little bit of CSS here to get that to work. The progressbar itself, I gave it a position of relative because I needed to give the percentage text a position of absolute. So that I could center it right where it needs to be in the middle of that progressbar. By inspecting the elements I discovered that the progressbar shading which we haven't seen yet but we're gonna see as we start. Well, in fact I can go and click on Fort Worth here and you can see that shading there. So it's a medium green shading. That was done. I simply right-clicked and clicked on Inspect and found out that that shading, it's by default a gray color. And it's being applied to this UI widget header class. So I simply just change that to green to give it a little bit of color. And then I aligned that percentage text again where I wanted it. So the difficult part comes in our JavaScript. We've already talked about how to instantiate that progressbar like so. But then just beneath that you'll see we have a bunch of events here tied to our different form fields. And these events are all calling this updateProgress function. And that updateProgress function contains all the logic for updating our progressbar. So what we're saying is for any of our inputs, whenever we change the value of that input, we want to update the progressbar. Whenever we select one of the items on our autocomplete field here, we want to update the progress. And we're using this autocomplete select event which you can find more information about on the jQuery UI website. Now there is also an autocomplete change event, but that didn't give me the results that I wanted. What I wanted was to be able to click in this category, start typing and then click on one of these options. The problem was when I used the autocomplete change event, when I clicked that option, the progress bar didn't automatically update. It didn't update until I clicked outside of that text field and that's not what I wanted. And then I discovered the autocompleteselect event, which as we saw, updates that progress bar as soon as we select an item. So that works out a little bit better. For our Select menu drop down, we couldn't use a regular change event, OnChange event that you would usually used for a select menu in HTML. And the reason for that if you remember is because jQuery UI is hiding that original select element that we created and replacing it with its own set of HTML markup. And so in order to properly use this Select, we needed to use the selectmenu change event here. And again, you can find more information from that on the jQuery UI website. But it's as easy as calling the change property and setting it equal to a function. And inside that function again, we're calling the updateprogress method which we haven't looked at yet. And then for the experience, I'm calling on the spinstop. This is another one where I had to experiment a little bit because there's a few different spin events that you could potentially call on. So whenever we click the button here, it should automatically update and that was my goal. I wanted it to automatically update that progress bar as soon as I clicked on an up or down arrow. Some of the events, it wouldn't do it until we clicked on the up and down arrow and then clicked outside of the text field. Obviously, that's not what I wanted. So the spinstop event was the one that ended up working for me. And so then at the very end of this document load function here, we have another call to updateProgress. So that it calls that updateProgress method as soon as the page loads. So let's take a look at this updateProgress method to see how it works. So we start off with a few variables here, numerous variables actually. We've got first of all, our progress variable. Initially we're setting it equal to zero. We're gonna change that as we calculate what has been selected and what hasn't. Then we have itemCount, that's set equal to five. That's the number of actual form elements that we have and we need that number to determine what percentage to use. And then we have itemsSelected. This is the number of items that we've already entered in values for and by default we're starting at zero. So then I've created a few more variables for each of our five items. And this basically just makes it easier to store the values associated with those items. So we're looking at location, which is this drop down here. And we're looking for the selected option. And we're looking for the value of that selected option. And so that's gonna be stored in this location variable. The value stored in this category field is gonna be stored in the category variable. Same with start date, experience and referrer. Then we're going to and remember, we have this itemsSelected which determines how many items we've entered a value for. By default, it's set to zero or at the beginning it's set to zero. And then it's gonna look through each of these items. Each of these form fields that we may have or may not have filled out. So if any of these are set to a blank string or if referrer is set to undefined or is not set to undefined, I should say. So if any of these are not empty, then we're gonna change the value of itemSelected, we're going to increase it by one. So at the most once we get to the end of this, itemSelected is going to equal five, at the least it will still equal zero. So then we're going to take itemsSelected divided by itemCount then multiply it by 100 to get the percentage we need to store in the progress variable that we created before. And that's what gives us the number that we're gonna stick in right here. So we're gonna do two things with that value. First of all, we're going to update our progressbar which will update the green bar that basically fills up this area. And then we're also gonna use that progress value to update this span here. This little piece of text right here that tells us in numbers what percentage is complete. And then finally, if our progress is greater than or equal to 100%, then we're going to enable our submit button. And again, we're using jQuery UI syntax for this. We're pointing to our Submit button and then we're saying .button and then inside the parenthesis and inside quotation marks, we're saying enable. That will re-enable a button that has been disabled. So again, that's how that works, you can look through that code and I would highly suggest that you look through it, make sure you understand it. But if we start filling out our form here. And let's fill in a value here, JavaScript. How many years of experience? Let's say I have 5 years. When can you start? I can start tomorrow and I heard about you from the Internets. And once that's 100% complete, we see our progress bar updating and we see that our Submit Form button is now activated. So that's one way that you can create a progress bar for your form. Thank you for watching and I'll see you in the next lesson.