YUI Library: Dialog & SimpleDialog
Simple Use Case: [Link]
Markup (optional, using HTML form in standard module format):
<div id="myDialog">
<div class="bd">
<form name="dlgForm" method="POST" action="
[Link]">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" />
</form></div>
</div>
Script:
//create the dialog:
var myDialog = new [Link]("myDialog");
//set dialog to use form post on submit action:
[Link](postmethod, form);
//set up button handler:
var handleSubmit = function() {
[Link](); }; //default submit action
//set up button, link to handler
var myButtons = [ { text:"Submit",
handler:handleSubmit, isDefault:true } ]);
//put buttons in configuration queue for processing
[Link]("buttons", myButtons);
[Link](); //render dialog to page
[Link](); //make dialog visible
2011-3-21
Key Interesting Moments in Dialog & SimpleDialog
See online docs for a complete list of Custom Events associated with Container controls.
Event
[Link](str elId[, obj config]);
Arguments:
(1) Element ID: HTML ID of the element being used to create the
Dialog or SimpleDialog. If this element doesn't exist, it will be
created.
(2) Configuration Object: JS object defining configuration properties
for the Dialog. See Configuration section for full list.
The postmethod Property: Dialog & SimpleDialog
postmethod:
none
form
async
Characteristics:
Button handlers do all form processing.
Button handlers called, then form posted to url designated
in forms target attribute.
Button handlers called, then form sent to url designated in
forms target attribute using asynchronous
XMLHttpRequest (via Connection Manager).
None.
None.
None.
Dialog/SimpleDialog Configuration Options
See online docs for complete list of Container options; see Simple Use Case (top left) for config. syntax.
Option (type)
text
Default
null
icon
none
postmethod (s)
varies
buttons (a)
null
[Link] &
SimpleDialog: Key
Properties
body (el)
form (el)
callback (o) Connection
All events above are YUI Custom Events (see Event Utility docs); subscribe to these
events using their subscribe method: [Link](fnMyHandler);.
Creates, renders and shows a panel using existing markup and all
default Dialog settings.
Constructor: [Link] & SimpleDialog
Arguments
beforeSubmitEvent
cancelEvent
submitEvent
v2.9
Description
Sets body text of SimpleDialog
(SimpleDialog only).
Sets url for graphical icon. Six icons
are provided: ICON_BLOCK,
ICON_WARN, ICON_HELP,
ICON_INFO, ICON_ALARM, and
ICON_TIP. (SimpleDialog only.)
Designates handling of form data; see
box at bottom left. Default is none for
SimpleDialog and async for Dialog.
Array of button objects. Button objects
contain three members: text label for
button, handler function to process
button click, and isDefault boolean
specifying whether this is the default
action on form submit.
See cheat sheet for Panel for additional configuration options; see online documentation
for full list.
Solutions
Use validate() to check form data prior to submitting:
fnCheckEmail = function() {
if ([Link]().[Link](@) > -1)
{return true;} else {return false;} };
[Link] = fnCheckEmail;
Set success handler for asynchronous post:
fnSuccess = function(o) {//function body};
[Link] = fnSuccess;
Dependencies
Dialog requires the full Container package, the Yahoo Object, Dom
Collection, and Event Utility. Animation, Button, Connection Manager
and Drag And Drop are optional (though required for specific features).
Manager callback object for
async transactions.
element (el) containing
header, body & footer
footer (el)
header (el)
id (s) of the element
[Link] &
SimpleDialog: Methods
appendToBody(el
element)
appendToFooter(el
element)
appendToHeader(el
element)
cancel() Executes cancel then
hide().
getData() Returns obect of
name/value pairs representing
form data.
hide()
render([el element])
Argument required for Dialogs
not built from existing markup.
Dialog will not be in the DOM or
visible until render is called.
setBody(str or el
content)
setFooter(str or el
content)
setHeader(str or el
content)
submit() Executes submit
followed by hide().
show()
getButtons()
YUI Library: Dialog Event Flow
v2.9