YUI Library: Dialog & SimpleDialog 2008-2-19 v2.

5
Simple Use Case: YAHOO.widget.Dialog Key Interesting Moments in Dialog & SimpleDialog YAHOO.widget.Dialog
See online docs for a complete list of Custom Events associated with Container controls. & SimpleDialog: Key
Markup (optional, using HTML form in standard module format): Event Arguments Properties
<div id="myDialog"> beforeSubmitEvent None. body (el)
<div class="bd"> cancelEvent None. form (el)
<form name="dlgForm" method="POST" action=" submitEvent None. callback (o) Connection
post.php"> All events above are YUI Custom Events (see Event Utility docs); subscribe to these Manager callback object for
<label for="firstname">First Name:</label> events using their subscribe method: myDlg.hideEvent.subscribe(fnMyHandler);. async transactions.
<input type="text" name="firstname" /> element (el) containing
Dialog/SimpleDialog Configuration Options
header, body & footer
</form></div>
</div> footer (el)
See online docs for complete list of Container options; see Simple Use Case (top left) for config. syntax.
header (el)
Script: Option (type) Default Description id (s) of the element
text null Sets body text of SimpleDialog
//create the dialog:
(SimpleDialog only). YAHOO.widget.Dialog
var myDialog = new YAHOO.widget.Dialog("myDialog");
icon “none” Sets url for graphical icon. Six icons & SimpleDialog:
//set dialog to use form post on submit action:
are provided: ICON_BLOCK,
myDialog.cfg.queueProperty(“postmethod”, “form”); Methods
//set up button handler: ICON_WARN, ICON_HELP,
var handleSubmit = function() { ICON_INFO, ICON_ALARM, and appendToBody(el
this.submit(); }; //default submit action ICON_TIP. (SimpleDialog only.) element)
//set up button, link to handler postmethod (s) varies Designates handling of form data; see appendToFooter(el
var myButtons = [ { text:"Submit", box at bottom left. Default is “none” for element)
handler:handleSubmit, isDefault:true } ]); SimpleDialog and “async” for Dialog. appendToHeader(el
//put buttons in configuration queue for processing buttons (a) null Array of button objects. Button objects element)
myDialog.cfg.queueProperty("buttons", myButtons); contain three members: text label for cancel() Executes cancel
then hide().
mDialog.render(); //render dialog to page button, handler function to process
myDialog.show(); //make dialog visible getData() Returns obect of
button click, and isDefault boolean name/value pairs
Creates, renders and shows a panel using existing markup and all specifying whether this is the default representing form data.

action on form submit. hide()

default Dialog settings.
See cheat sheet for Panel for additional configuration options; see online documentation render([el element])
for full list. Argument required for
Constructor: YAHOO.widget.Dialog & SimpleDialog Dialogs not built from
existing markup. Dialog will
Solutions not be in the DOM or visible
YAHOO.widget.Dialog(str elId[, obj config]); until render is called.
Use validate() to check form data prior to submitting: setBody(str or el
Arguments:
content)
(1) Element ID: HTML ID of the element being used to create the fnCheckEmail = function() {
if (myDialog.getData().email.indexOf(“@”) > -1) setFooter(str or el
Dialog or SimpleDialog. If this element doesn't exist, it will be
{return true;} else {return false;} }; content)
created.
myDialog.validate = fnCheckEmail; setHeader(str or el
(2) Configuration Object: JS object defining configuration properties
content)
for the Dialog. See Configuration section for full list. Set “success” handler for asynchronous post: submit() Executes submit
followed by hide().
fnSuccess = function(o) {//function body};
The postmethod Property: Dialog & SimpleDialog myDialog.callback.success = fnSuccess; show()
postmethod: Characteristics: getButtons()
“none” Button handlers do all form processing. Dependencies
“form” Button handlers called, then form posted to url designated
in form’s target attribute. Dialog requires the full Container package, the Yahoo Object, Dom
“async” Button handlers called, then form sent to url designated in Collection, and Event Utility. Animation, Button, Connection Manager
form’s target attribute using asynchronous and Drag And Drop are optional (though required for specific features).
XMLHttpRequest (via Connection Manager).