Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Options and events: Dialog - Course Introduction to jQuery UI - Part 7 | web Developer courses

We already talked about the options we can have with a dialog. Here we will talk about more options and events.


Duration:  17 minutes

Summary: In this video, we continue the dialog discussion. We already talked about the options we can have with a dialog. Here we will talk about more options and events. I will start by looking at the different events provided with the dialog:  create, beforeClose, open, dragStart, dragStop, close. We will implement every one of them with an alert message. That way we can learn about the order these events are executing. Then we will see how to provide buttons for the dialog (in this case ‘Ok’ and ‘Cancel’). For each button we will provide the function that we need to execute. For the Ok button we confirm with the user. If the user clicked Ok on confirm , the dialog is closed. Otherwise, the class ui-widget-shadow is applied to the dialog.

Technology Used: jQuery UI and Visual Studio 2010

Keyword:  jQuery UI, Visual Studio 2010, width, dialog, create, beforeClose, open, dragStart, dragStop, close, autopen, buttons, confirm, this.

Transcript: Hello everyone. This is Ayad Boudiab, I'm a Senior .Net Application Developer, and we are proceeding with our discussion of jQuery UI widgets. In the previous video I showed you how we can work with the dialog, and I also showed you the options we can have when dealing with the dialog.

For example, as you see on the screen right now I have the ready function. I'm calling the dialog with id dialog, which is over here. I'm calling the function dialog on it, and parsing the options in the curly braces. I have specified the width and how I want to show the dialog, which could be something like slide or scale. I showed you some of the options in the previous video. When I preview this it will show me the actual dialog with its content, the dialog that I can resize, and the scrolling is showing or hiding depending on the [need]. And then I can also close the dialog, so these are some of the options I have.

Now, I need to talk about how we can add some functionality to the dialog. Let's add some more options with which we can work. As shown in the previous video, I can provide that dialog with a title. We did that in the Accordion video, right? Down here I have the Accordion discussion, that's why I named it "Accordion video". As we provide more and more of these options, I put a comma. You can put them on one line or on different lines, it's up to you.

The dialog has a specific width of 600. I need to provide some functionality with this dialog. Of course, with this functionality I'm just going to provide you with the alerts to see the order of these functions. I'm mostly interested in showing you what events we can have with this dialog. Now, how do we provide that? If a specific event happened, you want a function to be called. You're not providing a value.

Back in here, you said 600. If I need a specific event to happen like the create event, when the dialog is created you don't provide a specific value. You need to provide a specific function that you want to be called. The function signature looks like this:

create: function (event, ui) {

The function takes an event and the UI on which the event happens. So this is the function, and this is the code you want that function to execute when the dialog is created. In this case, I'm going to say "alert" and I'm going to provide the name of the function:


This is sometimes helpful if you're debugging a piece of code and you're trying to see the order in which these things are happening. So that's how the create event would happen. When the dialog is created, call the function that is going to do an alert. Remember when working with these options we provide commas. So here's the comma:


And I'm going to the next line to provide my other event. My other event could be beforeClose, meaning before the user closes the specific dialog, what do you want to happen? Again, I'm providing a function that takes event ui as a parameter. Here's the function's body with the appropriate information. I'm alerting that this is the specific event that should be triggered. So, let's see. That's beforeClose, and that's the event that has happened. In this case, I have the beforeClose event that's been triggered:

beforeClose: function (event, ui) { alert('beforeClose'); },

Scroll down. What other events do I want to happen? While the dialog is open, I want to call another function. A function with event and ui, and I want the alert to show up with specific information. In this case, I'm simply going to use "open".

Now, I'll call the dragStart function. When we start dragging the dialog, we want this to happen. If there is a dragStart, you'd assume there would also be a dragStop. When the drag stop is called, you also want something to happen. In this case, the drag stop would be alerted.

When the dialog is closed, you want that specific function to be called. Finally, there is no comma because this is the last one I have. The function is closed. You notice there's a bunch of events that could happen with the dialog: create, beforeClose, open, close, dragStart, and dragStop. So let's go ahead and preview that in the browser. Nothing happened because we need to create the dialog. Now, the dialog is open. I want to drag the dialog. As soon as I do that it says, "dragStart". After it moves it says, "dragStop". Then I'm done with the dialog. Before I close the dialog, the "beforeClose" function is called. And when this dialog is closed, the "close" method is being called.

So you see the series of actions that take place when dealing with the dialog. Every one of these provides the functionality you need, so you can go in and write what you want to happen. However, if the function is large and you see it as being too much, you don't want to have a bunch of messy code in here. Instead of providing the function here, you can use the function named "callOpen" which allows you to write that function somewhere else. You don't need to have the actual function right here. I had it here because it's a small function. I don't want to write it somewhere else and simply call it, but you could do that. You could just provide the function name here instead of writing the actual function itself. So that's how we can work with a dialog with these specific options. Now, let's see what else we can do with that dialog. Let me take these options out.

So I have a dialog with a width of 600. Another option you can work with is called autoOpen. This means that the dialog automatically opens. You don't have to have that, you can turn this autoOpen to false. In that case, clicking on a certain button will open the dialog. You don't want it to open when the page is open, so you could have that as an option by turning autoOpen to false. In this case I'm leaving it as true. I want that dialog to show, but I'm just showing you the options you have.

Also you have the option of specifying buttons for this specific dialog. I have a list of buttons I want to work with. First is the "OK" button. For the "OK" button I want to provide a specific function. And then I have another function for the "Cancel" button. So these are the options I have for this specific dialog. The cancel button is being closed, so now I can continue with my options. For example, I want to hide the dialog. I can make the dialog "explode". Okay, that's one of the options I can provide. I have option value, option value, buttons. However, in this case there's a bunch of buttons so they're wrapped with curly braces. When I'm done with buttons, I put a comma.

Now I put my final option and I don't have a comma after it. What do you want to happen when the "Cancel" button is clicked? The function you want is that you're referencing using jQuery. I want to get the actual object and I want to call dialog on it. So I can call a specific method on that dialog. What's the method you want called? I'm going to call it "close". So when a user clicks "Cancel", I'm referencing this object and I'm calling the dialog. In this case, that's how you call a specific method.

You parse that as a parameter for the dialog, you don't say "close". It won't work. You need to provide the actual method name to the dialog. That's why I had to say this and then dialog close. Now, in the case of the function when the user clicks "OK", I'm going to show the user some type of confirmation. So "confirm", that's from JavaScript. Are you sure? That's the confirm. When this confirms it will give me true or false. I want to do something for true, but something different for false. In this case, I'm going to use my operators: the question mark and the colon.

If this is true, confirm with "Are you sure?" Then I'm going to call the dialog "close" because I'm asking the user, "Are you sure?" If they say "OK", I'm going to close that specific dialog. The "No" option is after the colon. So what do you want to happen? After the colon, you can make any choice. In this case, I'm going to reference that specific dialog using the $ and # operators. That specific dialog will give me back the object dialog.

I'm going to add a class, so I put in the specific class with which I'm interested. In this case, I need the one called ui-widget-shadow. You might say, "how did you come up with that? Where does that come from? I haven't seen you create that specific class." Well, remember if you scroll up to the top of the page, you notice I have the CSS. So I went to the archive folder, opened the jQuery CSS and looked at all the classes available. One of them was called ui-widget-shadow, so I just used it. That's how we can simply work with those.

In this case, I'm saying I have buttons associated with this dialog. I have the "OK" and "Cancel" buttons. If the user clicks the "Cancel" button, I'm going to call method "close" to close the dialog. If the user clicks "OK", I'm going to confirm with, "Are you sure?" I'm going to do the same thing to close the dialog. I'm going to add the ui-widget-shadow class to the dialog.

So let's preview this in the browser. It comes up and has a specific width of 600. With autoOpen as true, it opens the dialog like you've seen all along. It has "OK" and "Cancel" buttons. The "Cancel" button simply closes the dialog. Now, let's preview it again. The "OK" button gives me "Are you sure?" or "OK" to close. Remember that we made our height option "explode" to explode the dialog. One more time, let's "view in browser". It shows up and I have "OK". Then it says, "Are you sure?" The "OK" button will close it, but the "Cancel" button will not.

If you say "Cancel", you'll notice that iu-widget-shadow has been applied. Meaning, the class shadow has been applied to this dialog. That's why you see it differently now, because I applied that class to the dialog. So these are some of the options you can work with. And these are the buttons you can provide for a specific dialog. Notice how we can specify the options, and then use comma to separate them. Then we provide those values and functions like I showed you with the other ones.

You don't have to have the function here, you can name a function here but write it somewhere else. This can clean up your code, especially if one or more of your functions happen to be large.

So this wraps up our discussion on dialog. We'll talk more about jQuery UI widgets in the upcoming videos, so please stay turned. Thank you very much for listening, I'm Ayad Boudiab and you take care.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login