Extending The Dialog in jQuery User Interface 1.7

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

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

Build highly interactive web applications with ready-to-use widgets from the jQuery User Interface library

€20.99    €10.50
by Dan Wellman | December 2009 | MySQL PHP Web Development

This is the second part of the article series on Dialog in jQuery User Interface 1.7
Read The Dialog in jQuery User Interface 1.7, which is the first part of this series.
In this article by Dan Wellman, we will cover the following topics:

  • Controlling a dialog programmatically
  • Getting data from the dialog
  • Dialog interoperability
  • A dynamic image-based dialog

Controlling a dialog programmatically

The dialog requires few methods in order to function. The full list of the methods we can call on a dialog is as follows:

Method

Used to

close

Close or hide the dialog.

destroy

Permanently disable the dialog. 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 just returning the underlying HTML to its original state, the dialog's destroy method also hides it.

disable

Temporarily disable the dialog.

enable

Enable the dialog if it has been disabled.

isOpen

Determine whether a dialog is open or not.

moveToTop

Move the specified dialog to the top of the stack.

open

Open the dialog.

option

Get or set any configurable option after the dialog has been initialized.

Toggling the dialog

We first take a look at opening the widget, which can be achieved with the simple use of the open method. Let's revisit dialog3.html in which the autoOpen option was set to false, so the dialog did not open when the page was loaded. Add the following < button> to the page:

<button id="toggle">Toggle dialog!</button>

Then add the following click-handler directly after the dialog's widget method:

$("#toggle").click(function() {
($("#myDialog").dialog("isOpen") == false) ?
 $("#myDialog").dialog("open") : $("#myDialog").dialog("close") ;
});

Save this file as dialog14.html. To the page we've added a simple < button> that can be used to either open or close the dialog depending on its current state. In the < script> element, we've added a click handler for the < button> that uses the JavaScript ternary conditional to check the return value of the isOpen method. If it returns false, the dialog is not open so we call its open method else we call the close method instead.

The open and close methods both trigger any applicable events, for example, the close method fires first the beforeclose and then the close events. Calling the close method is analogous to clicking the close button on the dialog.

Getting data from the dialog

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

We looked at an example earlier in the article which added some < button> elements to the dialog. The callback functions in that example didn't do anything, but this example gives us the opportunity to use them. Add the following code above the < script> tags in dialog14.html.

<p>Please answer the opinion poll:</p>
<div id="myDialog" title="Best Widget Library">
<p>Is jQuery UI the greatest JavaScript widget library?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"
 checked="checked"><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="development-bundle/jquery-1.3.2.js"></script>

Now change the final < script> element to as follows:

<script type="text/javascript">
$(function(){
var execute = function(){
var answer;
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
$("<p>").text("Thanks for selecting " +answer).appendTo($("body"));
$("#myDialog").dialog("close");

}
var cancel = function() {
$("#myDialog").dialog("close");
}
var dialogOpts = {
buttons: {
"Ok": execute,
"Cancel": cancel
}
};
$("#myDialog").dialog(dialogOpts);
});
</script>

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

We start the < script> by filling out the execute function that will be attached as the value of the Ok property in the buttons object later in the script. It will therefore be executed each time the Ok button is clicked.

In this function we use jQuery's each() method to look at both of the radio buttons and determine which one is selected. We set the value of the answer variable to the radio button's value and then created a short message along with appending it to the < body> of the page. The callback mapped to the Cancel button is simple, all we do is close the dialog using the close method.

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

The point of this trivial example was to see that getting data from the dialog is as simple as getting data from any other component on the page.

Dialog interoperability

We can easily place other UI widgets into the dialog, such as the accordion widget. In a new file in your text editor create the following 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="development-bundle/themes/smoothness/ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Dialog Example 17</title>
</head>
<body>
<div id="myDialog" title="An Accordion Dialog">
<div id="myAccordion">
<h2><a href="#">Header 1</a></h2><div>Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit.Aenean sollicitudin.</div>
<h2><a href="#">Header 2</a></h2><div>Etiam tincidunt est vitae est.
 Ut posuere, mauris at sodales rutrum, turpis.</div>
<h2><a href="#">Header 3</a></h2><div>Donec at dolor ac metus pharetra aliquam.
Suspendisse purus.</div>
</div>
</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.draggable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.resizable.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(function(){

$("#myDialog").dialog();
$("#myAccordion").accordion();
});
</script>
</body>
</html>

Save this file as dialog16.html. The underlying markup for the accordion widget is placed into the dialog's container element, and we just call each component's widget method in the < script>. The combined widget should appear like this:

jQuery UI 1.7: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets from the jQuery User Interface library
Published: November 2009
eBook Price: €20.99
Book Price: €34.99
See more
Select your format and quantity:

A dynamic image-based dialog

The class behind the dialog widget is compact and caters to a small range of specialized behavior, much of which we have already looked at. We can still have some fun with a dynamic dialog box, which loads different content depending on which element triggers it. The following image shows the kind of page we'll end up with:

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="development-bundle/themes/smoothness/ui.all.css">
<link rel="stylesheet" type="text/css" href="css/ajaxDialog.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI AJAX Dialog Example</title>
</head>
<body>
<div id="thumbs">
<div class="ui-widget-header">
<h2>Some Common Flowers</h2>
</div>
<p>(click a thumbnail to view a full-size image)</p>
<div class="thumb ui-helper-clearfix ui-widget-content">
<a href="img/dialog/flowers/fullsize/helianthus_annuus.jpg"
title="Helianthus annuus">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="img/dialog/flowers/thumbs/helianthus_annuus.jpg" alt="Helianthus annuus"></a>
<h3>Helianthus annuus</h3>
<p>Sunflowers (Helianthus annuus) are annual plants native to the Americas,
 that possess a large flowering head</p>
</div>
<div class="thumb ui-helper-clearfix ui-widget-content">
<a href="img/dialog/flowers/fullsize/lilium_columbianum.jpg" title="Lilium columbianum">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="img/dialog/flowers/thumbs/lilium_columbianum.jpg" alt="Lilium columbianum"></a>
<h3>Lilium columbianum</h3>
<p>The Lilium columbianum is a lily native to western North America.
It is also known as the Columbia Lily or Tiger Lily</p>
</div>
<div class="thumb ui-helper-clearfix ui-widget-content">
<a href="img/dialog/flowers/fullsize/myosotis_scorpioides.jpg"
title="Myosotis scorpioides">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="img/dialog/flowers/thumbs/myosotis_scorpioides.jpg" alt="Myosotis scorpioides"></a>
<h3>Myosotis scorpioides</h3>
<p>The Myosotis scorpioides, or Forget-me-not, is a herbaceous perennial
plant of the genus Myosotis.</p></div>
<div class="thumb ui-helper-clearfix ui-widget-content last">
<a href="img/dialog/flowers/fullsize/nelumbo_nucifera.jpg" title="Nelumbo nucifera">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="img/dialog/flowers/thumbs/nelumbo_nucifera.jpg" alt="Nelumbo nucifera"></a>
<h3>Nelumbo nucifera</h3>
<p>Nelumbo nucifera is known by a number of names including Indian lotus,
sacred lotus, bean of India, or simply lotus.</p>
</div>
</div>
<div id="ajaxDialog"></div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.dialog.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="development-bundle/ui/ui.draggable.js"></script>
</body>
</html>

Save this file as ajaxDialog.html. The page is relatively straightforward—we've got an outer container which encloses everything and an element which we've given the class name ui-widget-header. We've used the latter in order to pick up some of the default styling from the theme in use.

Following this we have some explanatory text followed by a series of containers. Several class names are given to these container, some of which are so that we can style them, and others (such as ui-helper-clearfix) in order to pick up framework or theme styles.

Within each of these containers is an image wrapped in an anchor, a subheading, and some descriptive text. After the outer container comes the empty < div> element, which will form the basis of our dialog. We don't use the Resizable component in this example as this behavior is not required.

Each of the thumbnail images is wrapped in a link in order for the page to function even with JavaScript disabled. The dialog widget won't work in this situation but the visitor will still be able to see a full-sized version of each image. Progressive enhancement such as this is essential is this kind of application.

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

<script type="text/javascript">
$(function(){
var filename, titleText;
var dialogOpts = {
modal: true,
width: 388,
height: 470,
autoOpen: false,

open: function() {
$("#ajaxDialog").empty();
$("<img>").attr("src", filename).appendTo("#ajaxDialog");
$("#ajaxDialog").dialog("option", "title", titleText);
}
};
$("#ajaxDialog").dialog(dialogOpts);
$("#thumbs").find("a").click(function(e) {
filename = $(this).attr("href");
titleText = $(this).attr("title");
$("#ajaxDialog").dialog("open");
e.preventDefault();
});
});
</script>

The first thing we do is define two variables, which we'll use to add the path to the full-sized image of whichever thumbnail was clicked to the dialog's inner content area, and store the image title to use as the text for the widget's title. We then add the configuration object for the dialog. We've seen all of these properties in action already so I won't go over most of them in much detail.

The open callback, called directly before the dialog is opened, is where we add the full-sized image to the dialog. We first create a new < img> element and set its src to the value of the filename variable. The new < img> is then appended to the inner content area of the dialog.

We then use the option method to set the title option to the value of the titleText variable. Once the open callback has been defined we then call the dialog's widget method as normal.

We can use the wrapper < a> elements as the triggers to open the dialog. Within our click-handler, we set the contents of our two variables using the href and title attributes. We then call the dialog's open method to display the dialog.

We'll also need a new stylesheet for this example. In a new page in your text editor, add the following code:

#thumbs {
width:342px; background-color:#eeeeee; border:1px solid
#cccccc; padding:10px 0 10px 10px;
}
#thumbs p {
font-family:Verdana; font-size:9px; width:330px;
text-align:center;
}
.thumb {

width:310px; height:114px; border:1px solid #cccccc;
border-bottom:none; padding:10px;
}
.last { border-bottom:1px solid #cccccc; }
.thumb img {
float:left; margin-right:10px; cursor:pointer;
border:1px solid #cccccc;
}
.thumb h3 { margin:0; float:left; width:198px; }
#thumbs .thumb p {
margin:0; font-family:Verdana; font-size:13px;
text-align:left; width:310px;
}
#thumbs .ui-widget-header { width:330px; text-align:center; }
.ui-dialog-titlebar { text-transform:capitalize; }

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 ajaxDialog.css in the css folder. This should now give us the page that we saw in the previous screenshot and when a thumbnail is clicked, the full size version of the same image will be displayed:

Summary

In this article, we focused on the dialog widget. We looked at how it can be configured and controlled to provide maximum benefit and appeal.

jQuery UI 1.7: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets from the jQuery User Interface library
Published: November 2009
eBook Price: €20.99
Book Price: €34.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.3 with PHP
jQuery 1.3 with PHP

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Learning jQuery 1.3
Learning jQuery 1.3

PHP Team Development
PHP Team Development

ICEfaces 1.8: Next Generation Enterprise Web Development
ICEfaces 1.8: Next Generation Enterprise Web Development

Symfony 1.3 Web Application Development
Symfony 1.3 Web Application Development

JBoss AS 5 Development
JBoss AS 5 Development

JBoss RichFaces 3.3
JBoss RichFaces 3.3

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