YUI Library Examples: Container Family: Dialog Quickstart Example
Container Family: Dialog Quickstart Example
The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page — whether interally to the page or by sending the information to the server via form post or XMLHttpRequest. This example shows how to do the latter. Click the button to show the Dialog instance and its form fields; fill out the form; submit the form. Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.
Getting Started with the Dialog Control
The Dialog component is an extension of Panel that is meant to emulate the behavior of an dialog window using a floating, draggable HTML element. Dialog provides an interface for easily gathering information from the user without leaving the underlying page context. The information gathered is collected via a standard HTML form; Dialog supports the submission of form data through XMLHttpRequest, through a normal form submission, or through a manual script-based response (where the script reads and responds to the form values and the form is never actually submitted to the server).
Instantiating a Dialog is very similar to other controls in the Container collection. In this tutorial, we will create a Dialog from existing markup where the container element's id is "dialog1":
| 1 | // Instantiate the Dialog |
| 2 | YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", |
| 3 | { width : "300px", |
| 4 | fixedcenter : true, |
| 5 | visible : false, |
| 6 | constraintoviewport : true, |
| 7 | buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true }, |
| 8 | { text:"Cancel", handler:handleCancel } ] |
| 9 | } ); |
| view plain | print | ? |
The properties for width, fixedcenter, visible, and constraintoviewport are inherited from Panel. Unique to the Dialog control is the buttons property, which takes an array of object literals representing the buttons that will be rendered in the Dialog's footer. Each one of these button literals has three possible properties: "text" which represents the button text, "handler" which is a reference to the function that will execute when the button is clicked, and "isDefault" which will apply a bold style to the button when set to true.
Next, we must define the handleCancel and handleSubmit handlers for our buttons. In this tutorial, the submit and cancel buttons will call the corresponding functions in the Dialog:
| 1 | // Define various event handlers for Dialog |
| 2 | var handleSubmit = function() { |
| 3 | this.submit(); |
| 4 | }; |
| 5 | var handleCancel = function() { |
| 6 | this.cancel(); |
| 7 | }; |
| view plain | print | ? |
By default, the Dialog is submitted using the Connection Manager. In order to handle the response from the server, we must define callback functions that will execute when the submission has occurred. First, we will define the functions, and then we will set them into our Dialog's callback — the same callback object that will be passed to Connection Manager's asyncRequest method. For the purposes of this example, the success handler will simply diplay the server response on the page. The failure handler will alert the response status code, if something goes wrong:
| 1 | var handleSuccess = function(o) { |
| 2 | var response = o.responseText; |
| 3 | response = response.split("<!")[0]; |
| 4 | document.getElementById("resp").innerHTML = response; |
| 5 | }; |
| 6 | |
| 7 | var handleFailure = function(o) { |
| 8 | alert("Submission failed: " + o.status); |
| 9 | }; |
| 10 | |
| 11 | YAHOO.example.container.dialog1.callback = { success: handleSuccess, |
| 12 | failure: handleFailure }; |
| view plain | print | ? |
You can also take advantage of Dialog's built-in validation function so that you can verify that the values entered by the user are valid prior to form submission. In this tutorial, we will verify that the user has entered, at the very least, a first and last name. Using the getData function, we can easily query the values of the form fields. In a valid scenario, the function should return true, otherwise the function should return false, which will prevent the submission:
| 1 | |
| 2 | // Validate the entries in the form to require that both first and last name are entered |
| 3 | YAHOO.example.container.dialog1.validate = function() { |
| 4 | var data = this.getData(); |
| 5 | if (data.firstname == "" || data.lastname == "") { |
| 6 | alert("Please enter your first and last names."); |
| 7 | return false; |
| 8 | } else { |
| 9 | return true; |
| 10 | } |
| 11 | }; |
| view plain | print | ? |
Finally, we will build the markup for the Dialog. A Dialog contains a form whose fields will be submitted to the server. Note that the URL where the form will be submitted is specified in the "action" attribute of the form.
| 1 | <div id="dialog1"> |
| 2 | <div class="hd">Please enter your information</div> |
| 3 | <div class="bd"> |
| 4 | <form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php"> |
| 5 | <label for="firstname">First Name:</label><input type="textbox" name="firstname" /> |
| 6 | <label for="lastname">Last Name:</label><input type="textbox" name="lastname" /> |
| 7 | <label for="email">E-mail:</label><input type="textbox" name="email" /> |
| 8 | |
| 9 | <label for="state[]">State:</label> |
| 10 | <select multiple name="state[]"> |
| 11 | <option value="California">California</option> |
| 12 | <option value="New Jersey">New Jersey</option> |
| 13 | <option value="New York">New York</option> |
| 14 | </select> |
| 15 | |
| 16 | <div class="clear"></div> |
| 17 | |
| 18 | <label for="radiobuttons">Radio buttons:</label> |
| 19 | <input type="radio" name="radiobuttons[]" value="1" checked/> 1 |
| 20 | <input type="radio" name="radiobuttons[]" value="2" /> 2 |
| 21 | |
| 22 | <div class="clear"></div> |
| 23 | |
| 24 | <label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1 |
| 25 | |
| 26 | <label for="textarea">Text area:</label><textarea name="textarea"></textarea> |
| 27 | |
| 28 | <div class="clear"></div> |
| 29 | |
| 30 | <label for="cbarray">Multi checkbox:</label> |
| 31 | <input type="checkbox" name="cbarray[]" value="1" /> 1 |
| 32 | <input type="checkbox" name="cbarray[]" value="2" /> 2 |
| 33 | </form> |
| 34 | </div> |
| 35 | </div> |
| view plain | print | ? |
Configuration for This Example
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
YUI Logger Output:
Logger Console
INFO 1197ms (+0) 3:22:33 AM:
Config
Firing Config event: iframe=false
INFO 1197ms (+0) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1197ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1197ms (+10) 3:22:33 AM:
Config
setProperty: x=39
INFO 1187ms (+0) 3:22:33 AM:
Config
Firing Config event: iframe=false
INFO 1187ms (+0) 3:22:33 AM:
Config
Config event queue: iframe=false,
INFO 1187ms (+0) 3:22:33 AM:
Config
queueProperty: iframe=undefined
INFO 1187ms (+1) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1186ms (+0) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1186ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1186ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1186ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1186ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1186ms (+0) 3:22:33 AM:
Config
Firing Config event: y=224
INFO 1186ms (+0) 3:22:33 AM:
Config
Config event queue: y=224, iframe=false,
INFO 1186ms (+0) 3:22:33 AM:
Config
queueProperty: iframe=undefined
INFO 1186ms (+1) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1185ms (+0) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1185ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1185ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1185ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1185ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1185ms (+0) 3:22:33 AM:
Config
Firing Config event: x=39
INFO 1185ms (+0) 3:22:33 AM:
Config
Config event queue: x=39, y=224, iframe=false,
INFO 1185ms (+0) 3:22:33 AM:
Config
queueProperty: iframe=undefined
IFRA 1185ms (+1) 3:22:33 AM:
global
xy: 39,224
INFO 1184ms (+0) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1184ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1184ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1184ms (+1) 3:22:33 AM:
Config
Config event queue: x=39, y=224, iframe=false,
INFO 1183ms (+0) 3:22:33 AM:
Config
queueProperty: y=224
INFO 1183ms (+0) 3:22:33 AM:
Config
setProperty: y=224
INFO 1183ms (+0) 3:22:33 AM:
Config
Config event queue: x=39, iframe=false,
INFO 1183ms (+0) 3:22:33 AM:
Config
queueProperty: x=39
INFO 1183ms (+0) 3:22:33 AM:
Config
setProperty: x=39
INFO 1183ms (+0) 3:22:33 AM:
Config
Firing Config event: xy=39,224
INFO 1183ms (+3) 3:22:33 AM:
Config
Firing Config event: visible=false
INFO 1180ms (+0) 3:22:33 AM:
Config
Firing Config event: buttons=[object Object],[object Object]
INFO 1180ms (+0) 3:22:33 AM:
Config
Firing Config event: constraintoviewport=true
INFO 1180ms (+0) 3:22:33 AM:
Config
Config event queue: constraintoviewport=true, buttons=[object Object],[object Object], visible=false, xy=39,224, iframe=false,
INFO 1180ms (+0) 3:22:33 AM:
Config
queueProperty: iframe=undefined
INFO 1180ms (+0) 3:22:33 AM:
Config
Config event queue: constraintoviewport=true, buttons=[object Object],[object Object], visible=false, xy=39,224, iframe=false,
INFO 1180ms (+0) 3:22:33 AM:
Config
queueProperty: xy=39,224
INFO 1180ms (+0) 3:22:33 AM:
Config
setProperty: xy=39,224
INFO 1180ms (+0) 3:22:33 AM:
Config
Firing Config event: fixedcenter=true
INFO 1180ms (+1) 3:22:33 AM:
Config
Config event queue: fixedcenter=true, constraintoviewport=true, buttons=[object Object],[object Object], visible=false, iframe=false,
INFO 1179ms (+0) 3:22:33 AM:
Config
queueProperty: iframe=undefined
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: width=30em
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: hideaftersubmit=true
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: postdata=null
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: postmethod=async
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: close=true
INFO 1179ms (+0) 3:22:33 AM:
Config
setProperty: strings=[object Object]
INFO 1179ms (+0) 3:22:33 AM:
Config
Firing Config event: strings=[object Object]
INFO 1179ms (+0) 3:22:33 AM:
Config
setProperty: zindex=0
INFO 1179ms (+1) 3:22:33 AM:
Config
Firing Config event: zindex=null
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: modal=false
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: underlay=shadow
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: draggable=true
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: dragonly=false
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: preventcontextoverlap=false
INFO 1178ms (+0) 3:22:33 AM:
Config
setProperty: autofillheight=body
INFO 1178ms (+0) 3:22:33 AM:
Config
Firing Config event: autofillheight=body
INFO 1178ms (+8) 3:22:33 AM:
Config
Firing Config event: appendtodocumentbody=false
INFO 1170ms (+1) 3:22:33 AM:
Config
Firing Config event: monitorresize=true
INFO 1169ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, autofillheight=body, preventcontextoverlap=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, width=30em, fixedcenter=true, constraintoviewport=true, iframe=false, buttons=[object Object],[object Object], visible=false,
INFO 1169ms (+0) 3:22:33 AM:
Config
queueProperty: buttons=[object Object],[object Object]
INFO 1169ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, autofillheight=body, preventcontextoverlap=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, buttons=none, width=30em, fixedcenter=true, visible=false, constraintoviewport=true, iframe=false,
INFO 1169ms (+0) 3:22:33 AM:
Config
queueProperty: constraintoviewport=true
INFO 1169ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, autofillheight=body, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, buttons=none, width=30em, fixedcenter=true, iframe=false, visible=false,
INFO 1169ms (+0) 3:22:33 AM:
Config
queueProperty: visible=false
INFO 1169ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, autofillheight=body, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, buttons=none, width=30em, fixedcenter=true, iframe=false, visible=true,
INFO 1169ms (+0) 3:22:33 AM:
Config
queueProperty: fixedcenter=true
INFO 1169ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, autofillheight=body, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, buttons=none, visible=true, width=30em, fixedcenter=false, iframe=false,
INFO 1169ms (+1) 3:22:33 AM:
Config
queueProperty: width=30em
INFO 1168ms (+0) 3:22:33 AM:
Config
Firing Config event: visible=false
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: visible=false
INFO 1168ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true, buttons=none, visible=true,
INFO 1168ms (+0) 3:22:33 AM:
Config
queueProperty: buttons=none
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: buttons=none
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: buttons
INFO 1168ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, visible=true, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null, hideaftersubmit=true,
INFO 1168ms (+0) 3:22:33 AM:
Config
queueProperty: hideaftersubmit=true
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: hideaftersubmit=true
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: hideaftersubmit
INFO 1168ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, visible=true, zindex=null, strings=[object Object], close=true, postmethod=async, postdata=null,
INFO 1168ms (+0) 3:22:33 AM:
Config
queueProperty: postdata=null
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: postdata=null
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: postdata
INFO 1168ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, visible=true, zindex=null, strings=[object Object], close=true, postmethod=async,
INFO 1168ms (+0) 3:22:33 AM:
Config
queueProperty: postmethod=async
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: postmethod=async
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: postmethod
INFO 1168ms (+0) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, dragonly=false, draggable=true, underlay=shadow, modal=false, visible=true, zindex=null, strings=[object Object], close=true,
INFO 1168ms (+0) 3:22:33 AM:
Config
queueProperty: strings=[object Object]
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: strings=[object Object]
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: strings
INFO 1168ms (+0) 3:22:33 AM:
Config
setProperty: keylisteners=undefined
INFO 1168ms (+0) 3:22:33 AM:
Config
Added property: keylisteners
INFO 1168ms (+1168) 3:22:33 AM:
Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, autofillheight=body, iframe=false, preventcontextoverlap=false, constraintoviewport=false, close=true, dragonly=false, draggable=true, underlay=shadow, modal=false, visible=true, zindex=null,
INFO 0ms (+0) 3:22:32 AM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Container Family Examples:
- The Module Control
- Creating and Positioning an Overlay
- Simple Tooltip Example
- One Tooltip, Many Context Elements
- Simple Panel Example
- Skinning a Panel with Custom CSS: Introduction
- Skinning a Panel with Custom CSS: Advanced
- Creating a Modal "Loading" Panel
- Creating a Resizable Panel
- Dialog Quickstart Example
- SimpleDialog Quickstart Example
- Using ContainerEffect Transitions
- Using the Overlay Manager to Manage Multiple Panels
- Implementing Container Keyboard Shortcuts with KeyListener
- Using the Button ARIA Plugin (included with examples for Button Control)
- Using the Container ARIA Plugin
- Using A Menu Button To Replace A <select> Element (included with examples for Button Control)
- Replacing the content of a Button's Menu (included with examples for Button Control)
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Editor in a Dialog Control (included with examples for Rich Text Editor)
- Menu Buttons (included with examples for Button Control)
- Popup Calendar - Advanced (included with examples for Calendar Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Split Buttons (included with examples for Button Control)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Color Picker Button (included with examples for Button Control)
- Fixed Width Menu Button (included with examples for Button Control)
- OS-Style Programs Menu (included with examples for Menu Family)
- Application Menubar (included with examples for Menu Family)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)
More Container Family Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts (experimental)
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- Resize
- Rich Text Editor
- Selector
- Slider
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings