jQuery UI—The Dialog: Part 2

Exclusive offer: get 50% off this eBook here
jQuery UI 1.6: The User Interface Library for jQuery

jQuery UI 1.6: The User Interface Library for jQuery — Save 50%

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library

$26.99    $13.50
by Dan Wellman | February 2009 | Open Source PHP Web Development

In the previous part of the article, we learned how to create a basic dialog, work with dialog's properties and callbacks, and add buttons to the dialog.

In this final part of the article by Dan Wellman, we will learn how to enable animations for the dialog and how to control the dialog programmatically.

Using dialog animations

The dialog provides us with built-in effect abilities and also allows us to specify effects to use when the dialog is opened or closed. Using these effects is extremely easy and gives a great visual flair. Let's look at how these effects can be enabled. Create the following new page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 6</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var dialogOpts = {
hide: true
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
});
</script>
</body>
</html>

Save this as dialog6.html. In this example, our configuration object contains just one property—the hide property. The hide property accepts the boolean true as its value. This enables the built-in hide effect, which gradually reduces the dialog's size and opacity until it gracefully disappears.

We can also enable the show effect, which is the opposite of the hide animation. However, at this stage in the component's development, this causes a slight issue with its display. The following screenshot shows the hide effect in progress:

Controlling a dialog programmatically

The dialog requires few methods in order to function. As implementers, we can easily open, close, or destroy the dialog at will. The full list of methods we can call on a dialog instance are as follows:

Method

Used to

close

Closes or hides the dialog

destroy

Permanently disables the dialog

isOpen

Determines whether a dialog is open or not

moveToTop

Moves the specified dialog to the top of the stack

open

Opens the dialog

Let's look at opening and closing the widget, which can be achieved with the simple use of the open and close methods. Create the following new page in your text editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 7</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<button id="openDialog">Open the Dialog!</button>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define doOk function
var doOk = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "400px",
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for the button
$("#openDialog").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
});
</script>
</body>
</html>

The open and close methods require no additional arguments and do exactly as they say, pure and simple. Save the file as dialog7.html.

The destroy method for a dialog works in a slightly different way than it does for the other widgets we've seen so far. Instead of returning the underlying HTML to its original state, the dialog's destroy method completely disables the widget, hiding its content in the process. Change dialog7.html to make use of the destroy method:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 8</title>
</head>
<body>
<div id="myDialog" class="flora" title="This is the title">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</div>
<button id="openDialog">Open the Dialog!</button>
<button id="destroy">Destroy the dialog!</button>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define doOk function
var doOk = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background:"url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "400px",
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for the button
$("#openDialog").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
//define click handler for destroy
$("#destroy").click(function() {
//destroy dialog
$("#myDialog").dialog("destroy");
});
});
</script>
</body>
</html>

Save the changes as dialog8.html and try out the new file. You'll find that you can open and close the dialog as many times as you want until the Destroy the dialog! button is clicked. After this, the dialog will no longer appear (although it will still exist in the DOM). To fully remove the dialog mark-up from the page, we can simply chain the remove jQuery method onto the end of the destroy method call.

jQuery UI 1.6: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
Published: February 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Getting data from the dialog

Because the widget is a part of the underlying page, passing data to and from it is extremely simple. The dialog can be treated as any other standard element on the page. Let's look at a basic example. Create the following new page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/dialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 9</title>
</head>
<body>
<p>Answer the opinion poll:</p>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Is jQuery UI the greatest JavaScript extensions library in the universe?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.draggable.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define cancel button function
var cancel = function() {
//close the dialog
$("#myDialog").dialog("close");
}
//define done button function
var getResponse = function(){
var answer;
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
$("<p>").text("Thanks for selecting " + answer).insertAfter($("#poll"));
$("#myDialog").dialog("close");
}
//define config object
var dialogOpts = {
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Done": getResponse,
"Cancel": cancel
},
autoOpen: false
};
//create the dialog
$("#myDialog").dialog(dialogOpts);
//define click handler for poll button
$("#poll").click(function() {
//open the dialog
$("#myDialog").dialog("open");
});
});
</script>
</body>
</html>

Save this as dialog9.html. Our dialog contains a set of radio buttons, <label> elements, and some text. The purpose of the example is to get the result of whichever radio is selected, and then do something with it when the dialog closes.

We start the  <script> off by creating the cancel function, which will be attached as the value of the cancel property in the buttons object later in the script. It will therefore be executed each time the Cancel <button> is clicked.

Next, we define the getResponse function, which again will be attached to a <button> on the dialog using the buttons configuration object. In this function, we determine which radio is selected, then create and append to the page a new <p> element with a brief message and the value of the radio that was selected.

Once these two functions have been defined, we create a configuration object as before. The dialog is initially hidden from view, and we use the open method to show the dialog when the Poll <button> is clicked.

The following screenshot shows how the page should appear once a radio button has been selected:

jQuery UI 1.6: The User Interface Library for jQuery

Fun with dialog

The class behind the dialog widget is compact and is catered to a small range of specialized behavior, much of which we have already looked at. We can still have some fun with the dialog widget however, and could, for example, easily create an AJAX dialog which gets its content from a remote file when it is opened. In a new page in your text editor, add the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.dialog.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.resizable.css">
<link rel="stylesheet" type="text/css" href="styles/ajaxDialogTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI AJAX Dialog Example</title>
</head>
<body>
<div id="ajaxDialog" class="flora"></div>
<div class="content">
<h3>Section 1</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis
tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse
potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
viverra felis. Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.</p>
<p class="helpLabel">For help about this section, click here:
</p><span id="help1" class="helpIcon"></span>
</div>
<div class="content">
<h3>Section 2</h3>
<p>Lorem ipsum...</p>
<p class="helpLabel">For help about this section, click here:
</p><span id="help2" class="helpIcon"></span>
</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui1.6rc2/ui/ui.draggable.js"></script>
</body>
</html>

Now add the following <script> block directly before the closing </body> tag:

<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//control variable
var help = 0;
//define doOk function
var doOk = function() {
//close the dialog
$("#ajaxDialog").dialog("close");
}
//define config object
var dialogOpts = {
title: "Help!",
modal: true,
overlay: {
background: "url(img/modal.png) repeat"
},
buttons: {
"Ok!": doOk
},
height: "110px",
autoOpen: false,
open: function() {
//display correct dialog content
$("#ajaxDialog").load("helpContents" + (help == 1 ? 1 : 2) +
".html"); }
};
//create the dialog
$("#ajaxDialog").dialog(dialogOpts);
//define click handler for helpIcons
$(".helpIcon").click(function(event) {
//which icons was clicked?
event.target.id == "help1" ? help = 1 : help = 2;
//call open method
$("#ajaxDialog").dialog("open");
});
});
</script>

Save this as ajaxDialog.html. The dialog is similar to that of previous examples, but the main differences are the open event handler defined within the dialog's configuration object, and the click handler for the helpIcon elements.

When either of the helpIcon elements are clicked, the handler will determine which icon it was, and set our control variable accordingly. The open method of the dialog is then called.

This will invoke the open event handler which reads the control variable and then loads the appropriate external file into the dialog using the standard jQuery load method. We'll need a new stylesheet for this example. In a new page in your text editor, add the following code:

* page styles */
h3 { margin-top:0px; }
.content {
border:1px solid #7eb8f8;
margin-bottom:10px; padding:10px;
position:relative;
}
.helpIcon {
position:absolute; right:5px; bottom:5px;
background:url(../img/QuestionMark.png) no-repeat;
cursor:pointer;
display:block; width:25px; height:25px;
}
.helpLabel {
width:100%; margin:0px;
position:relative; right:25px; top:-2px;
font:bold 60% Verdana, Arial; text-align:right;
}
/* dialog styles */
.flora .ui-dialog, .flora.ui-dialog {
background-color:#ffffff;
}
.flora .ui-dialog .ui-dialog-titlebar, .flora.ui-dialog
.ui-dialog-titlebar {
background:url(../img/dialog/my-title.gif) repeat-x;
background-color:#003399;
}
.flora .ui-dialog .ui-dialog-titlebar-close, .flora.ui-dialog
.ui-dialog-titlebar-close {
background:url(../img/dialog/my-title-close.gif) no-repeat;
}
.flora .ui-dialog .ui-dialog-titlebar-close-hover, .flora.ui-dialog
.ui-dialog-titlebar-close-hover {
background:url(../img/dialog/my-title-close-hover.gif) no-repeat;
}
.flora .ui-dialog .ui-resizable-n, .flora.ui-dialog .ui-resizable-n {
background:url(../img/dialog/my-n.gif) repeat center top;
}
.flora .ui-dialog .ui-resizable-s, .flora.ui-dialog .ui-resizable-s {
background:url(../img/dialog/my-s.gif) repeat center top;
}
.flora .ui-dialog .ui-resizable-e, .flora.ui-dialog .ui-resizable-e {
background:url(../img/dialog/my-e.gif) repeat right center;
}
.flora .ui-dialog .ui-resizable-w, .flora.ui-dialog .ui-resizable-w {
background:url(../img/dialog/my-w.gif) repeat left center;
}
.flora .ui-dialog .ui-resizable-ne, .flora.ui-dialog .ui-resizable-ne
{
background:url(../img/dialog/my-ne.gif) repeat;
}
.flora .ui-dialog .ui-resizable-se, .flora.ui-dialog .ui-resizable-se
{
background:url(../img/dialog/my-se.gif) repeat;
}
.flora .ui-dialog .ui-resizable-sw, .flora.ui-dialog .ui-resizable-sw
{
background:url(../img/dialog/my-sw.gif) repeat;
}
.flora .ui-dialog .ui-resizable-nw, .flora.ui-dialog .ui-resizable-nw
{
background:url(../img/dialog/my-nw.gif) repeat;
}

Many of these styles have been used in previous examples, but adding some new rules for the other page elements lets us see the dialog in real-world context. Save this as ajaxDialogTheme.css in the styles folder. Open the page and click the help icon in the second section. The dialog, with its correct content, should be displayed:

jQuery UI 1.6: The User Interface Library for jQuery

Help Icon
The icons used as help icons in this example were taken from the ColorCons icon package by Ken Saunders, and can be found at http://mouserunner.com/Spheres_ColoCons1_Free_Icons.html.

Summary

In this final part of the article, we learned how to enable animations for the dialog and how to control the dialog programmatically. We took a brief look at the built-in opening and closing effects that can be used with the dialog, before moving on to see the basic methods we can invoke in order to make the dialog do things, such as open or close.

jQuery UI 1.6: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
Published: February 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Dan Wellman

Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

jQuery 1.4 Reference Guide
Drupal E-commerce with Ubercart 2.x

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

PrestaShop 1.3 Beginner's Guide
PrestaShop 1.3 Beginner's Guidee

Spring Security 3
Spring Security 3

jQuery 1.3 with PHP
jQuery 1.3 with PHP


Your rating: None Average: 5 (3 votes)
Not Working in IE by
I tested this in IE and not working. IE 8.0.6 Thanks.

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
n
L
g
u
x
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software