Duration: 18 minutes
Summary: In this video, we continue our discussion of jQuery UI. We will
talk about the progress bar and the auto-complete widgets. We start with the
progress bar, by looking at the progressbar() function and experimenting with
the options it provides. Then we will implement the change and complete events
so that the value of the span underneath will show the value of the progress as
setTimeout(). When the progress is complete, we call the hide function on the
In the case of the autocomplete, we have a
text box that will show the user the available options as the user is typing in
the text box. The drop-down options are matches to what the user has typed so
far. The source of these options is an array in this case, but that can be a
web service as well.
UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio
2010, progressbar, disabled, value, event, create, change, complete,
setTimeout, function, option, autocomplete, source.
Transcript: Hello everyone. This is Ayad Boudiab. I'm a senior .NET application
developer. We are continuing our series on jQuery UI widgets. We've been
discussing some of them, as far as, for example the dialogue. We see how we
can work with the dialogue and the different options available for the
dialogue. I'll also show you the slider, how we can work with some
animations with the slider, for example impacting a span that was
underneath it. Changing the value of the slider will actually change the
font size of the span. In this case, we need to talk about the progress
bar. We need to see how the progress bar would work, and also, as we
usually do, we'll discuss some of the options available for the progress
bar and also some of the events that we can work with, and how we can call
those and impact the appearance and the functionality of a progress bar.
Also, after the progress bar, I'm going to show you the autocomplete
option. We need to see how that works, as well.
Let's go ahead and get started with the progress bar first. As you see, we
have the actual references for our scripts on the top. We normally do that
with the actual link of the CSS. I'm using the Dark Hive style, and also
the scripts, one for the reference for the jQuery and the other reference
is for the jQuery UI.
Here's my functionality that I'm interested in, because when the DOM is
ready, that's the function that I want to call. Underneath, in the body, I
have the actual H2 for the progress bar with a class of demo hiders coming
in from the CSS that you see up here. Also, I have the div for one called
progress bar with that specific ID, and another div with a span ID of
Taking what you have so far and trying to preview that in the browser, you
will see the following. It simply just says progress bar. Okay. Let's see
what else we can do and how we can get this functionality going.
Let's go ahead and start with referencing this actual progress bar. Again,
in order for me to do that, I'll use my dollar sign, and I need to
reference something with an ID. I use the pound sign, and it was named
Progress Bar. I'll type "progress bar," and that will be the one that I
need, right? Progress bar, and I want to call the progress bar function on
it, so I called progress bar with a specific function. Simply having this
with a progress bar function and no options provided, let's see what kind
of defaults we have on that progress bar. I see a progress bar but nothing
in it. It doesn't do anything. It doesn't show me anything. Right? Okay.
As we always do with this functionality, we can provide a list of options.
These options are within the curly braces. For example, I can make it
disabled. I can make the progress bar disabled with a value of true. Right
now the progress bar is not functional. This is a disabled progress bar.
Okay. This is one of the options I can have.
Now, what other options can I have with a progress bar? I can, for example,
give it a specific value for the progress bar to be 50. Okay. So, progress
bar with a value of 50. Try to preview that in the browser. There is a
50/50 progress bar, right? Progress happened up to here and nothing
afterwards. This is the value for the progress bar, so happening at 50.
What other functionality can I work with? There are events, of course,
associated with the progress bar. Let's take that value off. Here, let's
start writing some of those options. Let's for example return that value to
be 0. That's the first option I have. Now, I need to provide some events
associated with the progress bar. The first event is to create. When the
progress bar is created, I don't provide a value. I provide a function,
right? That function takes event and UI as parameters. In this case, I'm
going to leave it empty. This is a create event. That's how I can write an
event, right? I provide the function name, and it does something when the
progress bar is created.
The two cases that I'm interested in, in here is actually the change and
the complete. I have the change event that I want to happen, and that of
course has a function associated with it. It takes an event and UI as
parameters. Now, I'm going to provide the actual body of the function. The
second one I'm interested in is complete. When the progress bar is
complete, what do you want to do? Also, it's a function that takes event
and UI. You want something to happen in this case. These are the two events
that in this case I'm interested in. There is nothing under here. These are
the two events that I'm interested in for this specific progress bar.
Now, let's go ahead and implement them. For the change event I want some
changes that happen to the value. In this case then, here's my jQuery,
right? I'm going to reference the actual status. I'm going to use pound,
status. Remember, the status is the one down here that I'm talking about,
right? That's with the ID. This is the status that I want. I use the pound
sign to reference it since it has an ID. Using that status, now I'm going
to change the text on that status. I call the function, "Text." Then, I'm
going to give it a specific value. What would that value be? The value is
the value of the progress bar. Underneath the progress bar, where there is
a span named "Status," I'm going to display the value of the progress bar
using text. Here, within text I want to provide what that value is.
In order for me to provide that value, I want to call the progress bar and
retrieve the option value. Let's go ahead and do that. I'm going to use the
dollar sign, and then I'm going to use the pound sign and progress bar. I'm
going to call progress bar. That will give me the actual progress bar.
Then, in order for me to retrieve the option value, I'm going to call his
progress bar function, right? In here, all I did is I retrieved that
specific control using jQuery. I called the progress bar on it, and then
for that progress bar, I want to retrieve the option value. How do I do
that? By providing the first parameter as option, the second parameter as
value. That way, I'm calling that progress bar. I'm asking it to provide me
the value that it has currently. Any time that changes, I'm going to
retrieve that value and put it in the actual span that you see underneath
the progress bar.
Now when all that is completed, when the actual progress has completed, I'm
going to retrieve that progress bar, again using the pound sign. I'm going
to retrieve progress bar. Then, close that. When I retrieve that progress
bar, I'm going to hide it. So when the progress has completed, I'm going to
hide the progress bar. I'm going to hide it in an animation of slide.
That's how I'm going to hide this progress bar. Let's go ahead and save
that. We have the change and the complete events for this progress bar.
Now, I want to provide some more animation to it. I want to show that the
progress is happening after a certain period of time. There's certain
progress that's always happening. How do I do that? By using the set
take a specific code or a specific function. Let's call this one update,
and it's happening every, say, second, I'm going to say thousand. But I
don't want it to be that slow, so I'm going to say 200, one-fifth of that
value. This is the actual update that is going to be happening every that
amount of time. Now, the function update is down here. So, let's implement
that function. Function update. Okay.
Here's the body of that function. Now, with an update, what do you want to
happen? I'm going to retrieve the progress that just happened by asking for
the value option that you saw up there, right? Give me that value option
that just happened. This is the progress bar, retrieving the progress bar,
calling the progress bar function, retrieving the option named value. Get
that value; put it in the variable progress. Then, since it's from 0 to
100, I'm going to ask myself the question, "Did I reach 100?" If progress
is less than 100, I'm going to provide some functionality here. If the
progress is less than 100, then I'm going to get that specific value and
add 1 to it. So I'm going to progress a little bit more. This is the value
that I'm going to do. I'm going to call the chief progress bar, call the
progress bar function. For this specific option named "Value," I'm going to
make it progress plus one. If the progress is 50, 51. If 51, make it 52. If
52, make it 53. The progress is always happening. Why? Because set timeout,
this is the piece of code named update, so the update function is going to
be called every this period of time, which is the one-fifth of that second
that you see over there.
In this case then, when that is done, in order for this to keep
progressing, I'm going to set timeout again, and then I'm going to call
like I did up there, update also every that period of time. Now, that keeps
progressing on and on and on and on, until it reaches the value of 100.
When it reaches the value of 100, it's done. When it's done, it's called
complete event. This complete event will make it hide to the sliding and
hidden from the screen.
Let's see if what we've done is actually working. Let's go ahead and
preview that in the browser. Here's the progress bar. It's progressing, and
every time it does that on the change, it's calling the text of the span to
change its value, right? Now, keep progressing until it reaches the top
value that I'm interested in. When it reaches that specific value, it
slides away. It reaches a value of 100, and then it slides away. That's how
the progress bar is happening because, again, this is the change method
being called. I'm sorry, change event being called, complete event being
called. I'm setting the timeout to happen on that update every this period
of time. That set timeout will call the update. Update will retrieve that
value. If that value is less than 100, change it to 1 plus, then call that
set timeout on it again until it's done. That's how we can work with a
Now, let's go ahead and move into the autocomplete to show you how that
works. In the case of autocomplete, here's the page, autocomplete.htm. I
have the actual link and the scripts, like we've always done, right? Then
here I have the jQuery function. When the DOM is ready, I want something to
happen. There are a couple of divs in here, and then I have a label, and
input the name "Names," and then the label are for that specific input.
That's why you use the keyword "for" in here to refer that label is for
this specific textbox.
If I preview that in the browser, that should be able to give me a label
with names and then also the actual textbox. You see nothing here, right?
Names, and then a text box. So far, so good.
Let's see how we can work with autocomplete. I'm going to provide you with
a list of names, for example names list. That's the array. Make it equal to
the sum names. Those names are, for example, James, then Tom, then Jessica.
Instead of you seeing me typing all those names, let me go ahead and paste
them here. I have a list of names, names list - James, Tom, Jessica, Lisa,
Robert, Kyle, Amanda, Sarah, Bob, Bool, and Chris. These are the list of
names that they're available in the variable names list array.
Now, if I go underneath here and I try to reference using jQuery and my
pound sign because I'm referencing an ID, names, which is down here. That's
the input box, right? I'm referencing names. For these names, I can say
.autocomplete. I'm calling autocomplete on this functionality, and then I'm
going to provide it with a source because who is the source of this auto
completion? If you want the auto completion to be turned on and available,
where is the data coming from? We have multiple options, right? You can
call a web service. That web service will give you some values back in
adjacent format, and then it can show that over here by displaying them.
You can make a call to the server and retrieve that from the database and
display the list of names that you're interested in, or for simplicity in
this case, we just retrieve those from an array. The source of my
information then is actually the names list. I would say source. There'll
be names list. The list of names would be the actual source for this auto
completion. Names, is names here, with a pound sign to retrieve it,
autocomplete to call autocomplete on it, and provide the source of this
autocomplete for the names.
Now, let's try to preview that in the browser. I click in the box and I
start typing, for example "r," and it gave me Robert, Sarah, and Chris as
auto completion. Why? Because Robert has R in it, Sarah has R in the
middle, and Chris has R in the middle. These are the three names that match
my criteria. It gave me this as auto completion so I can select the value
that I want. I can take out the R and say B. So I get Robert, Bob, and Bool
as matched. Remember, the match is not only on the first letter. Robert, B
is right in the middle. That was also one of my options to select from.
This is the autocomplete. Again those values don't have to be provided from
an array. They could be form a web service that you called, and then it
would give you back those values. You can tap in to the server and retrieve
any values that you want in adjacent format. You can display those in the
In this video, we discussed how we can work with the progress bar, and also
we discussed how we can use autocomplete with jQuery UI. Thank you very
much for listening. I'm Ayad Boudiab, and you take care.